hover to make the tree grow // screen sorcery - XF version // twine_cræft



.tree {
position: absolute;
left: 50%;
bottom: 0;
mix-blend-mode: darken;
}
.tree, .tree * {
backface-visibility: hidden;
}
.tree .trunk {
position: absolute;
bottom: 0;
left: 0;
width: 30px;
height: 0;
background: brown;
transition: height 10s;
}
:hover .tree .trunk {
height: 90vh;
}
.tree .trunk:before, .tree .trunk:after {
content: '';
background: white;
height: 200%;
width: 100%;
position: absolute;
bottom: 0;
border-radius: 100%;
}
.tree .trunk:before {
left: 55%;
}
.tree .trunk:after {
right: 55%;
}
.tree .trunk .branch {
position: absolute;
z-index: 2;
bottom: 0;
left: 50%;
width: 10px;
background: brown;
mix-blend-mode: darken;
height: 0;
transition: transform 2s;
}
.tree .trunk .branch:nth-child(odd) {
transform-origin: 50% 100%;
transform: translateX(-50%) rotate(-20deg) scale(0);
}
.tree .trunk .branch:nth-child(even) {
transform-origin: 50% 100%;
transform: translateX(-50%) rotate(20deg) scale(0);
}
.tree .trunk .branch:nth-child(1) {
bottom: 100%;
width: 0px;
transition-delay: 10s;
height: 0%;
}
:hover .tree .trunk .branch:nth-child(1):nth-child(odd) {
transform: translateX(-50%) rotate(-70deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(1):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(2) {
bottom: 90%;
width: 4px;
transition-delay: 9s;
height: 3%;
}
:hover .tree .trunk .branch:nth-child(2):nth-child(odd) {
transform: translateX(-50%) rotate(-70deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(2):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(2) .leaf:nth-child(1) {
bottom: 83%;
transition-delay: 0s;
}
:hover .tree .trunk .branch:nth-child(2) .leaf:nth-child(1) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(2) .leaf:nth-child(1):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(2) .leaf:nth-child(1):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(2) .leaf:nth-child(2) {
bottom: 79%;
transition-delay: 4.5s;
}
:hover .tree .trunk .branch:nth-child(2) .leaf:nth-child(2) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(2) .leaf:nth-child(2):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(2) .leaf:nth-child(2):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(3) {
bottom: 80%;
width: 8px;
transition-delay: 8s;
height: 6%;
}
:hover .tree .trunk .branch:nth-child(3):nth-child(odd) {
transform: translateX(-50%) rotate(-70deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(3):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(3) .leaf:nth-child(1) {
bottom: 83%;
transition-delay: 0s;
}
:hover .tree .trunk .branch:nth-child(3) .leaf:nth-child(1) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(3) .leaf:nth-child(1):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(3) .leaf:nth-child(1):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(3) .leaf:nth-child(2) {
bottom: 79%;
transition-delay: 4s;
}
:hover .tree .trunk .branch:nth-child(3) .leaf:nth-child(2) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(3) .leaf:nth-child(2):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(3) .leaf:nth-child(2):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(3) .leaf:nth-child(3) {
bottom: 75%;
transition-delay: 8s;
}
:hover .tree .trunk .branch:nth-child(3) .leaf:nth-child(3) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(3) .leaf:nth-child(3):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(3) .leaf:nth-child(3):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(3) .leaf:nth-child(4) {
bottom: 71%;
transition-delay: 12s;
}
:hover .tree .trunk .branch:nth-child(3) .leaf:nth-child(4) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(3) .leaf:nth-child(4):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(3) .leaf:nth-child(4):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(4) {
bottom: 70%;
width: 12px;
transition-delay: 7s;
height: 9%;
}
:hover .tree .trunk .branch:nth-child(4):nth-child(odd) {
transform: translateX(-50%) rotate(-70deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(4):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(4) .leaf:nth-child(1) {
bottom: 83%;
transition-delay: 0s;
}
:hover .tree .trunk .branch:nth-child(4) .leaf:nth-child(1) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(4) .leaf:nth-child(1):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(4) .leaf:nth-child(1):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(4) .leaf:nth-child(2) {
bottom: 79%;
transition-delay: 3.5s;
}
:hover .tree .trunk .branch:nth-child(4) .leaf:nth-child(2) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(4) .leaf:nth-child(2):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(4) .leaf:nth-child(2):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(4) .leaf:nth-child(3) {
bottom: 75%;
transition-delay: 7s;
}
:hover .tree .trunk .branch:nth-child(4) .leaf:nth-child(3) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(4) .leaf:nth-child(3):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(4) .leaf:nth-child(3):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(4) .leaf:nth-child(4) {
bottom: 71%;
transition-delay: 10.5s;
}
:hover .tree .trunk .branch:nth-child(4) .leaf:nth-child(4) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(4) .leaf:nth-child(4):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(4) .leaf:nth-child(4):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(4) .leaf:nth-child(5) {
bottom: 67%;
transition-delay: 14s;
}
:hover .tree .trunk .branch:nth-child(4) .leaf:nth-child(5) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(4) .leaf:nth-child(5):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(4) .leaf:nth-child(5):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(4) .leaf:nth-child(6) {
bottom: 63%;
transition-delay: 17.5s;
}
:hover .tree .trunk .branch:nth-child(4) .leaf:nth-child(6) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(4) .leaf:nth-child(6):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(4) .leaf:nth-child(6):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(5) {
bottom: 60%;
width: 16px;
transition-delay: 6s;
height: 12%;
}
:hover .tree .trunk .branch:nth-child(5):nth-child(odd) {
transform: translateX(-50%) rotate(-70deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(5):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(5) .leaf:nth-child(1) {
bottom: 83%;
transition-delay: 0s;
}
:hover .tree .trunk .branch:nth-child(5) .leaf:nth-child(1) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(5) .leaf:nth-child(1):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(5) .leaf:nth-child(1):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(5) .leaf:nth-child(2) {
bottom: 79%;
transition-delay: 3s;
}
:hover .tree .trunk .branch:nth-child(5) .leaf:nth-child(2) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(5) .leaf:nth-child(2):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(5) .leaf:nth-child(2):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(5) .leaf:nth-child(3) {
bottom: 75%;
transition-delay: 6s;
}
:hover .tree .trunk .branch:nth-child(5) .leaf:nth-child(3) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(5) .leaf:nth-child(3):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(5) .leaf:nth-child(3):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(5) .leaf:nth-child(4) {
bottom: 71%;
transition-delay: 9s;
}
:hover .tree .trunk .branch:nth-child(5) .leaf:nth-child(4) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(5) .leaf:nth-child(4):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(5) .leaf:nth-child(4):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(5) .leaf:nth-child(5) {
bottom: 67%;
transition-delay: 12s;
}
:hover .tree .trunk .branch:nth-child(5) .leaf:nth-child(5) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(5) .leaf:nth-child(5):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(5) .leaf:nth-child(5):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(5) .leaf:nth-child(6) {
bottom: 63%;
transition-delay: 15s;
}
:hover .tree .trunk .branch:nth-child(5) .leaf:nth-child(6) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(5) .leaf:nth-child(6):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(5) .leaf:nth-child(6):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(5) .leaf:nth-child(7) {
bottom: 59%;
transition-delay: 18s;
}
:hover .tree .trunk .branch:nth-child(5) .leaf:nth-child(7) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(5) .leaf:nth-child(7):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(5) .leaf:nth-child(7):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(5) .leaf:nth-child(8) {
bottom: 55%;
transition-delay: 21s;
}
:hover .tree .trunk .branch:nth-child(5) .leaf:nth-child(8) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(5) .leaf:nth-child(8):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(5) .leaf:nth-child(8):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(6) {
bottom: 50%;
width: 20px;
transition-delay: 5s;
height: 15%;
}
:hover .tree .trunk .branch:nth-child(6):nth-child(odd) {
transform: translateX(-50%) rotate(-70deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(6):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(6) .leaf:nth-child(1) {
bottom: 83%;
transition-delay: 0s;
}
:hover .tree .trunk .branch:nth-child(6) .leaf:nth-child(1) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(6) .leaf:nth-child(1):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(6) .leaf:nth-child(1):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(6) .leaf:nth-child(2) {
bottom: 79%;
transition-delay: 2.5s;
}
:hover .tree .trunk .branch:nth-child(6) .leaf:nth-child(2) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(6) .leaf:nth-child(2):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(6) .leaf:nth-child(2):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(6) .leaf:nth-child(3) {
bottom: 75%;
transition-delay: 5s;
}
:hover .tree .trunk .branch:nth-child(6) .leaf:nth-child(3) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(6) .leaf:nth-child(3):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(6) .leaf:nth-child(3):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(6) .leaf:nth-child(4) {
bottom: 71%;
transition-delay: 7.5s;
}
:hover .tree .trunk .branch:nth-child(6) .leaf:nth-child(4) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(6) .leaf:nth-child(4):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(6) .leaf:nth-child(4):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(6) .leaf:nth-child(5) {
bottom: 67%;
transition-delay: 10s;
}
:hover .tree .trunk .branch:nth-child(6) .leaf:nth-child(5) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(6) .leaf:nth-child(5):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(6) .leaf:nth-child(5):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(6) .leaf:nth-child(6) {
bottom: 63%;
transition-delay: 12.5s;
}
:hover .tree .trunk .branch:nth-child(6) .leaf:nth-child(6) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(6) .leaf:nth-child(6):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(6) .leaf:nth-child(6):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(6) .leaf:nth-child(7) {
bottom: 59%;
transition-delay: 15s;
}
:hover .tree .trunk .branch:nth-child(6) .leaf:nth-child(7) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(6) .leaf:nth-child(7):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(6) .leaf:nth-child(7):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(6) .leaf:nth-child(8) {
bottom: 55%;
transition-delay: 17.5s;
}
:hover .tree .trunk .branch:nth-child(6) .leaf:nth-child(8) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(6) .leaf:nth-child(8):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(6) .leaf:nth-child(8):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(6) .leaf:nth-child(9) {
bottom: 51%;
transition-delay: 20s;
}
:hover .tree .trunk .branch:nth-child(6) .leaf:nth-child(9) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(6) .leaf:nth-child(9):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(6) .leaf:nth-child(9):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(6) .leaf:nth-child(10) {
bottom: 47%;
transition-delay: 22.5s;
}
:hover .tree .trunk .branch:nth-child(6) .leaf:nth-child(10) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(6) .leaf:nth-child(10):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(6) .leaf:nth-child(10):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(7) {
bottom: 40%;
width: 24px;
transition-delay: 4s;
height: 18%;
}
:hover .tree .trunk .branch:nth-child(7):nth-child(odd) {
transform: translateX(-50%) rotate(-70deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(7):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(7) .leaf:nth-child(1) {
bottom: 83%;
transition-delay: 0s;
}
:hover .tree .trunk .branch:nth-child(7) .leaf:nth-child(1) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(7) .leaf:nth-child(1):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(7) .leaf:nth-child(1):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(7) .leaf:nth-child(2) {
bottom: 79%;
transition-delay: 2s;
}
:hover .tree .trunk .branch:nth-child(7) .leaf:nth-child(2) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(7) .leaf:nth-child(2):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(7) .leaf:nth-child(2):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(7) .leaf:nth-child(3) {
bottom: 75%;
transition-delay: 4s;
}
:hover .tree .trunk .branch:nth-child(7) .leaf:nth-child(3) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(7) .leaf:nth-child(3):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(7) .leaf:nth-child(3):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(7) .leaf:nth-child(4) {
bottom: 71%;
transition-delay: 6s;
}
:hover .tree .trunk .branch:nth-child(7) .leaf:nth-child(4) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(7) .leaf:nth-child(4):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(7) .leaf:nth-child(4):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(7) .leaf:nth-child(5) {
bottom: 67%;
transition-delay: 8s;
}
:hover .tree .trunk .branch:nth-child(7) .leaf:nth-child(5) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(7) .leaf:nth-child(5):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(7) .leaf:nth-child(5):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(7) .leaf:nth-child(6) {
bottom: 63%;
transition-delay: 10s;
}
:hover .tree .trunk .branch:nth-child(7) .leaf:nth-child(6) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(7) .leaf:nth-child(6):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(7) .leaf:nth-child(6):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(7) .leaf:nth-child(7) {
bottom: 59%;
transition-delay: 12s;
}
:hover .tree .trunk .branch:nth-child(7) .leaf:nth-child(7) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(7) .leaf:nth-child(7):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(7) .leaf:nth-child(7):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(7) .leaf:nth-child(8) {
bottom: 55%;
transition-delay: 14s;
}
:hover .tree .trunk .branch:nth-child(7) .leaf:nth-child(8) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(7) .leaf:nth-child(8):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(7) .leaf:nth-child(8):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(7) .leaf:nth-child(9) {
bottom: 51%;
transition-delay: 16s;
}
:hover .tree .trunk .branch:nth-child(7) .leaf:nth-child(9) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(7) .leaf:nth-child(9):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(7) .leaf:nth-child(9):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(7) .leaf:nth-child(10) {
bottom: 47%;
transition-delay: 18s;
}
:hover .tree .trunk .branch:nth-child(7) .leaf:nth-child(10) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(7) .leaf:nth-child(10):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(7) .leaf:nth-child(10):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(7) .leaf:nth-child(11) {
bottom: 43%;
transition-delay: 20s;
}
:hover .tree .trunk .branch:nth-child(7) .leaf:nth-child(11) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(7) .leaf:nth-child(11):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(7) .leaf:nth-child(11):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(7) .leaf:nth-child(12) {
bottom: 39%;
transition-delay: 22s;
}
:hover .tree .trunk .branch:nth-child(7) .leaf:nth-child(12) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(7) .leaf:nth-child(12):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(7) .leaf:nth-child(12):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(8) {
bottom: 30%;
width: 28px;
transition-delay: 3s;
height: 21%;
}
:hover .tree .trunk .branch:nth-child(8):nth-child(odd) {
transform: translateX(-50%) rotate(-70deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(8):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(8) .leaf:nth-child(1) {
bottom: 83%;
transition-delay: 0s;
}
:hover .tree .trunk .branch:nth-child(8) .leaf:nth-child(1) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(8) .leaf:nth-child(1):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(8) .leaf:nth-child(1):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(8) .leaf:nth-child(2) {
bottom: 79%;
transition-delay: 1.5s;
}
:hover .tree .trunk .branch:nth-child(8) .leaf:nth-child(2) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(8) .leaf:nth-child(2):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(8) .leaf:nth-child(2):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(8) .leaf:nth-child(3) {
bottom: 75%;
transition-delay: 3s;
}
:hover .tree .trunk .branch:nth-child(8) .leaf:nth-child(3) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(8) .leaf:nth-child(3):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(8) .leaf:nth-child(3):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(8) .leaf:nth-child(4) {
bottom: 71%;
transition-delay: 4.5s;
}
:hover .tree .trunk .branch:nth-child(8) .leaf:nth-child(4) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(8) .leaf:nth-child(4):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(8) .leaf:nth-child(4):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(8) .leaf:nth-child(5) {
bottom: 67%;
transition-delay: 6s;
}
:hover .tree .trunk .branch:nth-child(8) .leaf:nth-child(5) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(8) .leaf:nth-child(5):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(8) .leaf:nth-child(5):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(8) .leaf:nth-child(6) {
bottom: 63%;
transition-delay: 7.5s;
}
:hover .tree .trunk .branch:nth-child(8) .leaf:nth-child(6) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(8) .leaf:nth-child(6):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(8) .leaf:nth-child(6):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(8) .leaf:nth-child(7) {
bottom: 59%;
transition-delay: 9s;
}
:hover .tree .trunk .branch:nth-child(8) .leaf:nth-child(7) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(8) .leaf:nth-child(7):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(8) .leaf:nth-child(7):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(8) .leaf:nth-child(8) {
bottom: 55%;
transition-delay: 10.5s;
}
:hover .tree .trunk .branch:nth-child(8) .leaf:nth-child(8) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(8) .leaf:nth-child(8):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(8) .leaf:nth-child(8):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(8) .leaf:nth-child(9) {
bottom: 51%;
transition-delay: 12s;
}
:hover .tree .trunk .branch:nth-child(8) .leaf:nth-child(9) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(8) .leaf:nth-child(9):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(8) .leaf:nth-child(9):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(8) .leaf:nth-child(10) {
bottom: 47%;
transition-delay: 13.5s;
}
:hover .tree .trunk .branch:nth-child(8) .leaf:nth-child(10) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(8) .leaf:nth-child(10):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(8) .leaf:nth-child(10):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(8) .leaf:nth-child(11) {
bottom: 43%;
transition-delay: 15s;
}
:hover .tree .trunk .branch:nth-child(8) .leaf:nth-child(11) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(8) .leaf:nth-child(11):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(8) .leaf:nth-child(11):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(8) .leaf:nth-child(12) {
bottom: 39%;
transition-delay: 16.5s;
}
:hover .tree .trunk .branch:nth-child(8) .leaf:nth-child(12) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(8) .leaf:nth-child(12):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(8) .leaf:nth-child(12):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(8) .leaf:nth-child(13) {
bottom: 35%;
transition-delay: 18s;
}
:hover .tree .trunk .branch:nth-child(8) .leaf:nth-child(13) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(8) .leaf:nth-child(13):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(8) .leaf:nth-child(13):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(8) .leaf:nth-child(14) {
bottom: 31%;
transition-delay: 19.5s;
}
:hover .tree .trunk .branch:nth-child(8) .leaf:nth-child(14) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(8) .leaf:nth-child(14):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(8) .leaf:nth-child(14):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(9) {
bottom: 20%;
width: 32px;
transition-delay: 2s;
height: 24%;
}
:hover .tree .trunk .branch:nth-child(9):nth-child(odd) {
transform: translateX(-50%) rotate(-70deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(9):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(9) .leaf:nth-child(1) {
bottom: 83%;
transition-delay: 0s;
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(1) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(1):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(1):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(9) .leaf:nth-child(2) {
bottom: 79%;
transition-delay: 1s;
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(2) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(2):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(2):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(9) .leaf:nth-child(3) {
bottom: 75%;
transition-delay: 2s;
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(3) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(3):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(3):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(9) .leaf:nth-child(4) {
bottom: 71%;
transition-delay: 3s;
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(4) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(4):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(4):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(9) .leaf:nth-child(5) {
bottom: 67%;
transition-delay: 4s;
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(5) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(5):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(5):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(9) .leaf:nth-child(6) {
bottom: 63%;
transition-delay: 5s;
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(6) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(6):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(6):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(9) .leaf:nth-child(7) {
bottom: 59%;
transition-delay: 6s;
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(7) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(7):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(7):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(9) .leaf:nth-child(8) {
bottom: 55%;
transition-delay: 7s;
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(8) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(8):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(8):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(9) .leaf:nth-child(9) {
bottom: 51%;
transition-delay: 8s;
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(9) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(9):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(9):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(9) .leaf:nth-child(10) {
bottom: 47%;
transition-delay: 9s;
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(10) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(10):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(10):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(9) .leaf:nth-child(11) {
bottom: 43%;
transition-delay: 10s;
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(11) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(11):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(11):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(9) .leaf:nth-child(12) {
bottom: 39%;
transition-delay: 11s;
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(12) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(12):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(12):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(9) .leaf:nth-child(13) {
bottom: 35%;
transition-delay: 12s;
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(13) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(13):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(13):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(9) .leaf:nth-child(14) {
bottom: 31%;
transition-delay: 13s;
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(14) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(14):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(14):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(9) .leaf:nth-child(15) {
bottom: 27%;
transition-delay: 14s;
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(15) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(15):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(15):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(9) .leaf:nth-child(16) {
bottom: 23%;
transition-delay: 15s;
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(16) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(16):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(9) .leaf:nth-child(16):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(10) {
bottom: 10%;
width: 36px;
transition-delay: 1s;
height: 27%;
}
:hover .tree .trunk .branch:nth-child(10):nth-child(odd) {
transform: translateX(-50%) rotate(-70deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(10):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(10) .leaf:nth-child(1) {
bottom: 83%;
transition-delay: 0s;
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(1) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(1):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(1):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(10) .leaf:nth-child(2) {
bottom: 79%;
transition-delay: 0.5s;
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(2) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(2):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(2):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(10) .leaf:nth-child(3) {
bottom: 75%;
transition-delay: 1s;
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(3) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(3):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(3):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(10) .leaf:nth-child(4) {
bottom: 71%;
transition-delay: 1.5s;
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(4) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(4):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(4):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(10) .leaf:nth-child(5) {
bottom: 67%;
transition-delay: 2s;
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(5) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(5):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(5):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(10) .leaf:nth-child(6) {
bottom: 63%;
transition-delay: 2.5s;
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(6) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(6):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(6):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(10) .leaf:nth-child(7) {
bottom: 59%;
transition-delay: 3s;
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(7) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(7):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(7):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(10) .leaf:nth-child(8) {
bottom: 55%;
transition-delay: 3.5s;
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(8) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(8):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(8):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(10) .leaf:nth-child(9) {
bottom: 51%;
transition-delay: 4s;
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(9) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(9):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(9):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(10) .leaf:nth-child(10) {
bottom: 47%;
transition-delay: 4.5s;
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(10) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(10):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(10):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(10) .leaf:nth-child(11) {
bottom: 43%;
transition-delay: 5s;
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(11) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(11):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(11):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(10) .leaf:nth-child(12) {
bottom: 39%;
transition-delay: 5.5s;
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(12) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(12):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(12):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(10) .leaf:nth-child(13) {
bottom: 35%;
transition-delay: 6s;
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(13) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(13):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(13):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(10) .leaf:nth-child(14) {
bottom: 31%;
transition-delay: 6.5s;
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(14) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(14):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(14):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(10) .leaf:nth-child(15) {
bottom: 27%;
transition-delay: 7s;
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(15) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(15):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(15):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(10) .leaf:nth-child(16) {
bottom: 23%;
transition-delay: 7.5s;
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(16) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(16):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(16):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(10) .leaf:nth-child(17) {
bottom: 19%;
transition-delay: 8s;
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(17) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(17):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(17):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:nth-child(10) .leaf:nth-child(18) {
bottom: 15%;
transition-delay: 8.5s;
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(18) {
transform: scale(1);
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(18):nth-child(odd) {
transform: translateX(-50%) rotate(-170deg) scale(1);
}
:hover .tree .trunk .branch:nth-child(10) .leaf:nth-child(18):nth-child(even) {
transform: translateX(-50%) rotate(70deg) scale(1);
}
.tree .trunk .branch:before, .tree .trunk .branch:after {
content: '';
background: white;
height: 200%;
width: 100%;
position: absolute;
z-index: 0;
bottom: 0;
border-radius: 100%;
mix-blend-mode: luminosity;
}
.tree .trunk .branch:before {
left: 55%;
}
.tree .trunk .branch:after {
right: 55%;
}
.tree .trunk .leaf {
position: absolute;
z-index: 9;
left: 50%;
height: 20px;
width: 20px;
transform: scale(0);
background: green;
border-radius: 100% 0;
transition: transform 1s;
}
.tree .trunk .leaf:nth-child(odd) {
transform-origin: 50% 0%;
transform: translateX(-50%) rotate(-10deg) scale(0);
}
.tree .trunk .leaf:nth-child(even) {
transform-origin: 50% 0%;
transform: translateX(-50%) rotate(10deg) scale(0);