纯CSS实现的大树跳舞动画

CSS3 Dancing Tree

css3, tree, move

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3377
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background: #ceebbe;
    height: 100vh;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-perspective: 400px;
    perspective: 400px;
}
#tree {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-animation: cameraHorizontal 10000ms linear infinite;
    animation: cameraHorizontal 10000ms linear infinite;
}
#tree .trunk {
    position: absolute;
    width: 10px;
    height: 150px;
    background: #82503c;
    border-radius: 99px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
#tree .trunk::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 150px;
    background: #96643c;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    border-radius: 99px;
}
#tree .trunk::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.1);
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: rotateX(90deg) translate(-20px, 25px);
    transform: rotateX(90deg) translate(-20px, 25px);
}
#tree .branch {
    position: absolute;
    height: 50px;
    background: #82503c;
    border-radius: 99px;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    top: -46px;
}
#tree .branch::before {
    content: '';
    position: absolute;
    height: 50px;
    background: #96643c;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    border-radius: 99px;
}
#tree .branch_1 {
    width: 8px;
    -webkit-animation: shake1 5000ms ease-in-out infinite alternate;
    animation: shake1 5000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake1 {
    0% {
        -webkit-transform: rotateX(-7deg) rotateY(706deg) rotateZ(28deg);
        transform: rotateX(-7deg) rotateY(706deg) rotateZ(28deg);
    }
    100% {
        -webkit-transform: rotateX(-46deg) rotateY(481deg) rotateZ(-19deg);
        transform: rotateX(-46deg) rotateY(481deg) rotateZ(-19deg);
    }
}
@keyframes shake1 {
    0% {
        -webkit-transform: rotateX(-7deg) rotateY(706deg) rotateZ(28deg);
        transform: rotateX(-7deg) rotateY(706deg) rotateZ(28deg);
    }
    100% {
        -webkit-transform: rotateX(-46deg) rotateY(481deg) rotateZ(-19deg);
        transform: rotateX(-46deg) rotateY(481deg) rotateZ(-19deg);
    }
}
#tree .branch_1::before {
    width: 8px;
}
#tree .branch_1_1 {
    width: 6px;
    -webkit-animation: shake11 6000ms ease-in-out infinite alternate;
    animation: shake11 6000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake11 {
    0% {
        -webkit-transform: rotateX(-9deg) rotateY(192deg) rotateZ(36deg);
        transform: rotateX(-9deg) rotateY(192deg) rotateZ(36deg);
    }
    100% {
        -webkit-transform: rotateX(12deg) rotateY(105deg) rotateZ(-13deg);
        transform: rotateX(12deg) rotateY(105deg) rotateZ(-13deg);
    }
}
@keyframes shake11 {
    0% {
        -webkit-transform: rotateX(-9deg) rotateY(192deg) rotateZ(36deg);
        transform: rotateX(-9deg) rotateY(192deg) rotateZ(36deg);
    }
    100% {
        -webkit-transform: rotateX(12deg) rotateY(105deg) rotateZ(-13deg);
        transform: rotateX(12deg) rotateY(105deg) rotateZ(-13deg);
    }
}
#tree .branch_1_1::before {
    width: 6px;
}
#tree .branch_1_1_1 {
    width: 4px;
    -webkit-animation: shake111 7000ms ease-in-out infinite alternate;
    animation: shake111 7000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake111 {
    0% {
        -webkit-transform: rotateX(-48deg) rotateY(287deg) rotateZ(-5deg);
        transform: rotateX(-48deg) rotateY(287deg) rotateZ(-5deg);
    }
    100% {
        -webkit-transform: rotateX(53deg) rotateY(436deg) rotateZ(-38deg);
        transform: rotateX(53deg) rotateY(436deg) rotateZ(-38deg);
    }
}
@keyframes shake111 {
    0% {
        -webkit-transform: rotateX(-48deg) rotateY(287deg) rotateZ(-5deg);
        transform: rotateX(-48deg) rotateY(287deg) rotateZ(-5deg);
    }
    100% {
        -webkit-transform: rotateX(53deg) rotateY(436deg) rotateZ(-38deg);
        transform: rotateX(53deg) rotateY(436deg) rotateZ(-38deg);
    }
}
#tree .branch_1_1_1::before {
    width: 4px;
}
#tree .branch_1_1_1_1 {
    width: 2px;
    -webkit-animation: shake1111 8000ms ease-in-out infinite alternate;
    animation: shake1111 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake1111 {
    0% {
        -webkit-transform: rotateX(48deg) rotateY(628deg) rotateZ(-41deg);
        transform: rotateX(48deg) rotateY(628deg) rotateZ(-41deg);
    }
    100% {
        -webkit-transform: rotateX(46deg) rotateY(32deg) rotateZ(51deg);
        transform: rotateX(46deg) rotateY(32deg) rotateZ(51deg);
    }
}
@keyframes shake1111 {
    0% {
        -webkit-transform: rotateX(48deg) rotateY(628deg) rotateZ(-41deg);
        transform: rotateX(48deg) rotateY(628deg) rotateZ(-41deg);
    }
    100% {
        -webkit-transform: rotateX(46deg) rotateY(32deg) rotateZ(51deg);
        transform: rotateX(46deg) rotateY(32deg) rotateZ(51deg);
    }
}
#tree .branch_1_1_1_1::before {
    width: 2px;
}
#tree .branch_1_1_1_1 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64b564;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_1_1_1_1 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64cf64;
}
#tree .branch_1_1_1_2 {
    width: 2px;
    -webkit-animation: shake1112 8000ms ease-in-out infinite alternate;
    animation: shake1112 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake1112 {
    0% {
        -webkit-transform: rotateX(22deg) rotateY(369deg) rotateZ(-47deg);
        transform: rotateX(22deg) rotateY(369deg) rotateZ(-47deg);
    }
    100% {
        -webkit-transform: rotateX(52deg) rotateY(69deg) rotateZ(5deg);
        transform: rotateX(52deg) rotateY(69deg) rotateZ(5deg);
    }
}
@keyframes shake1112 {
    0% {
        -webkit-transform: rotateX(22deg) rotateY(369deg) rotateZ(-47deg);
        transform: rotateX(22deg) rotateY(369deg) rotateZ(-47deg);
    }
    100% {
        -webkit-transform: rotateX(52deg) rotateY(69deg) rotateZ(5deg);
        transform: rotateX(52deg) rotateY(69deg) rotateZ(5deg);
    }
}
#tree .branch_1_1_1_2::before {
    width: 2px;
}
#tree .branch_1_1_1_2 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64ac64;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_1_1_1_2 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64ec64;
}
#tree .branch_1_1_1_3 {
    width: 2px;
    -webkit-animation: shake1113 8000ms ease-in-out infinite alternate;
    animation: shake1113 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake1113 {
    0% {
        -webkit-transform: rotateX(50deg) rotateY(86deg) rotateZ(-23deg);
        transform: rotateX(50deg) rotateY(86deg) rotateZ(-23deg);
    }
    100% {
        -webkit-transform: rotateX(-24deg) rotateY(273deg) rotateZ(-41deg);
        transform: rotateX(-24deg) rotateY(273deg) rotateZ(-41deg);
    }
}
@keyframes shake1113 {
    0% {
        -webkit-transform: rotateX(50deg) rotateY(86deg) rotateZ(-23deg);
        transform: rotateX(50deg) rotateY(86deg) rotateZ(-23deg);
    }
    100% {
        -webkit-transform: rotateX(-24deg) rotateY(273deg) rotateZ(-41deg);
        transform: rotateX(-24deg) rotateY(273deg) rotateZ(-41deg);
    }
}
#tree .branch_1_1_1_3::before {
    width: 2px;
}
#tree .branch_1_1_1_3 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #649b64;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_1_1_1_3 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64b264;
}
#tree .branch_1_1_2 {
    width: 4px;
    -webkit-animation: shake112 7000ms ease-in-out infinite alternate;
    animation: shake112 7000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake112 {
    0% {
        -webkit-transform: rotateX(1deg) rotateY(183deg) rotateZ(3deg);
        transform: rotateX(1deg) rotateY(183deg) rotateZ(3deg);
    }
    100% {
        -webkit-transform: rotateX(22deg) rotateY(307deg) rotateZ(42deg);
        transform: rotateX(22deg) rotateY(307deg) rotateZ(42deg);
    }
}
@keyframes shake112 {
    0% {
        -webkit-transform: rotateX(1deg) rotateY(183deg) rotateZ(3deg);
        transform: rotateX(1deg) rotateY(183deg) rotateZ(3deg);
    }
    100% {
        -webkit-transform: rotateX(22deg) rotateY(307deg) rotateZ(42deg);
        transform: rotateX(22deg) rotateY(307deg) rotateZ(42deg);
    }
}
#tree .branch_1_1_2::before {
    width: 4px;
}
#tree .branch_1_1_2_1 {
    width: 2px;
    -webkit-animation: shake1121 8000ms ease-in-out infinite alternate;
    animation: shake1121 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake1121 {
    0% {
        -webkit-transform: rotateX(-4deg) rotateY(393deg) rotateZ(-2deg);
        transform: rotateX(-4deg) rotateY(393deg) rotateZ(-2deg);
    }
    100% {
        -webkit-transform: rotateX(43deg) rotateY(54deg) rotateZ(22deg);
        transform: rotateX(43deg) rotateY(54deg) rotateZ(22deg);
    }
}
@keyframes shake1121 {
    0% {
        -webkit-transform: rotateX(-4deg) rotateY(393deg) rotateZ(-2deg);
        transform: rotateX(-4deg) rotateY(393deg) rotateZ(-2deg);
    }
    100% {
        -webkit-transform: rotateX(43deg) rotateY(54deg) rotateZ(22deg);
        transform: rotateX(43deg) rotateY(54deg) rotateZ(22deg);
    }
}
#tree .branch_1_1_2_1::before {
    width: 2px;
}
#tree .branch_1_1_2_1 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64c264;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_1_1_2_1 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64ee64;
}
#tree .branch_1_1_2_2 {
    width: 2px;
    -webkit-animation: shake1122 8000ms ease-in-out infinite alternate;
    animation: shake1122 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake1122 {
    0% {
        -webkit-transform: rotateX(7deg) rotateY(698deg) rotateZ(14deg);
        transform: rotateX(7deg) rotateY(698deg) rotateZ(14deg);
    }
    100% {
        -webkit-transform: rotateX(58deg) rotateY(618deg) rotateZ(-19deg);
        transform: rotateX(58deg) rotateY(618deg) rotateZ(-19deg);
    }
}
@keyframes shake1122 {
    0% {
        -webkit-transform: rotateX(7deg) rotateY(698deg) rotateZ(14deg);
        transform: rotateX(7deg) rotateY(698deg) rotateZ(14deg);
    }
    100% {
        -webkit-transform: rotateX(58deg) rotateY(618deg) rotateZ(-19deg);
        transform: rotateX(58deg) rotateY(618deg) rotateZ(-19deg);
    }
}
#tree .branch_1_1_2_2::before {
    width: 2px;
}
#tree .branch_1_1_2_2 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64b264;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_1_1_2_2 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64c964;
}
#tree .branch_1_1_2_3 {
    width: 2px;
    -webkit-animation: shake1123 8000ms ease-in-out infinite alternate;
    animation: shake1123 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake1123 {
    0% {
        -webkit-transform: rotateX(-45deg) rotateY(81deg) rotateZ(-13deg);
        transform: rotateX(-45deg) rotateY(81deg) rotateZ(-13deg);
    }
    100% {
        -webkit-transform: rotateX(9deg) rotateY(434deg) rotateZ(-47deg);
        transform: rotateX(9deg) rotateY(434deg) rotateZ(-47deg);
    }
}
@keyframes shake1123 {
    0% {
        -webkit-transform: rotateX(-45deg) rotateY(81deg) rotateZ(-13deg);
        transform: rotateX(-45deg) rotateY(81deg) rotateZ(-13deg);
    }
    100% {
        -webkit-transform: rotateX(9deg) rotateY(434deg) rotateZ(-47deg);
        transform: rotateX(9deg) rotateY(434deg) rotateZ(-47deg);
    }
}
#tree .branch_1_1_2_3::before {
    width: 2px;
}
#tree .branch_1_1_2_3 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #649f64;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_1_1_2_3 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #649764;
}
#tree .branch_1_1_3 {
    width: 4px;
    -webkit-animation: shake113 7000ms ease-in-out infinite alternate;
    animation: shake113 7000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake113 {
    0% {
        -webkit-transform: rotateX(-35deg) rotateY(34deg) rotateZ(5deg);
        transform: rotateX(-35deg) rotateY(34deg) rotateZ(5deg);
    }
    100% {
        -webkit-transform: rotateX(24deg) rotateY(276deg) rotateZ(-32deg);
        transform: rotateX(24deg) rotateY(276deg) rotateZ(-32deg);
    }
}
@keyframes shake113 {
    0% {
        -webkit-transform: rotateX(-35deg) rotateY(34deg) rotateZ(5deg);
        transform: rotateX(-35deg) rotateY(34deg) rotateZ(5deg);
    }
    100% {
        -webkit-transform: rotateX(24deg) rotateY(276deg) rotateZ(-32deg);
        transform: rotateX(24deg) rotateY(276deg) rotateZ(-32deg);
    }
}
#tree .branch_1_1_3::before {
    width: 4px;
}
#tree .branch_1_1_3_1 {
    width: 2px;
    -webkit-animation: shake1131 8000ms ease-in-out infinite alternate;
    animation: shake1131 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake1131 {
    0% {
        -webkit-transform: rotateX(0deg) rotateY(52deg) rotateZ(44deg);
        transform: rotateX(0deg) rotateY(52deg) rotateZ(44deg);
    }
    100% {
        -webkit-transform: rotateX(-12deg) rotateY(203deg) rotateZ(-16deg);
        transform: rotateX(-12deg) rotateY(203deg) rotateZ(-16deg);
    }
}
@keyframes shake1131 {
    0% {
        -webkit-transform: rotateX(0deg) rotateY(52deg) rotateZ(44deg);
        transform: rotateX(0deg) rotateY(52deg) rotateZ(44deg);
    }
    100% {
        -webkit-transform: rotateX(-12deg) rotateY(203deg) rotateZ(-16deg);
        transform: rotateX(-12deg) rotateY(203deg) rotateZ(-16deg);
    }
}
#tree .branch_1_1_3_1::before {
    width: 2px;
}
#tree .branch_1_1_3_1 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64c464;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_1_1_3_1 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #649764;
}
#tree .branch_1_1_3_2 {
    width: 2px;
    -webkit-animation: shake1132 8000ms ease-in-out infinite alternate;
    animation: shake1132 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake1132 {
    0% {
        -webkit-transform: rotateX(-9deg) rotateY(415deg) rotateZ(-11deg);
        transform: rotateX(-9deg) rotateY(415deg) rotateZ(-11deg);
    }
    100% {
        -webkit-transform: rotateX(-33deg) rotateY(288deg) rotateZ(-47deg);
        transform: rotateX(-33deg) rotateY(288deg) rotateZ(-47deg);
    }
}
@keyframes shake1132 {
    0% {
        -webkit-transform: rotateX(-9deg) rotateY(415deg) rotateZ(-11deg);
        transform: rotateX(-9deg) rotateY(415deg) rotateZ(-11deg);
    }
    100% {
        -webkit-transform: rotateX(-33deg) rotateY(288deg) rotateZ(-47deg);
        transform: rotateX(-33deg) rotateY(288deg) rotateZ(-47deg);
    }
}
#tree .branch_1_1_3_2::before {
    width: 2px;
}
#tree .branch_1_1_3_2 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64a564;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_1_1_3_2 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64ab64;
}
#tree .branch_1_1_3_3 {
    width: 2px;
    -webkit-animation: shake1133 8000ms ease-in-out infinite alternate;
    animation: shake1133 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake1133 {
    0% {
        -webkit-transform: rotateX(-58deg) rotateY(424deg) rotateZ(56deg);
        transform: rotateX(-58deg) rotateY(424deg) rotateZ(56deg);
    }
    100% {
        -webkit-transform: rotateX(-12deg) rotateY(170deg) rotateZ(-54deg);
        transform: rotateX(-12deg) rotateY(170deg) rotateZ(-54deg);
    }
}
@keyframes shake1133 {
    0% {
        -webkit-transform: rotateX(-58deg) rotateY(424deg) rotateZ(56deg);
        transform: rotateX(-58deg) rotateY(424deg) rotateZ(56deg);
    }
    100% {
        -webkit-transform: rotateX(-12deg) rotateY(170deg) rotateZ(-54deg);
        transform: rotateX(-12deg) rotateY(170deg) rotateZ(-54deg);
    }
}
#tree .branch_1_1_3_3::before {
    width: 2px;
}
#tree .branch_1_1_3_3 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64c464;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_1_1_3_3 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64fa64;
}
#tree .branch_1_2 {
    width: 6px;
    -webkit-animation: shake12 6000ms ease-in-out infinite alternate;
    animation: shake12 6000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake12 {
    0% {
        -webkit-transform: rotateX(-49deg) rotateY(184deg) rotateZ(52deg);
        transform: rotateX(-49deg) rotateY(184deg) rotateZ(52deg);
    }
    100% {
        -webkit-transform: rotateX(-5deg) rotateY(474deg) rotateZ(18deg);
        transform: rotateX(-5deg) rotateY(474deg) rotateZ(18deg);
    }
}
@keyframes shake12 {
    0% {
        -webkit-transform: rotateX(-49deg) rotateY(184deg) rotateZ(52deg);
        transform: rotateX(-49deg) rotateY(184deg) rotateZ(52deg);
    }
    100% {
        -webkit-transform: rotateX(-5deg) rotateY(474deg) rotateZ(18deg);
        transform: rotateX(-5deg) rotateY(474deg) rotateZ(18deg);
    }
}
#tree .branch_1_2::before {
    width: 6px;
}
#tree .branch_1_2_1 {
    width: 4px;
    -webkit-animation: shake121 7000ms ease-in-out infinite alternate;
    animation: shake121 7000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake121 {
    0% {
        -webkit-transform: rotateX(-59deg) rotateY(479deg) rotateZ(20deg);
        transform: rotateX(-59deg) rotateY(479deg) rotateZ(20deg);
    }
    100% {
        -webkit-transform: rotateX(32deg) rotateY(599deg) rotateZ(-24deg);
        transform: rotateX(32deg) rotateY(599deg) rotateZ(-24deg);
    }
}
@keyframes shake121 {
    0% {
        -webkit-transform: rotateX(-59deg) rotateY(479deg) rotateZ(20deg);
        transform: rotateX(-59deg) rotateY(479deg) rotateZ(20deg);
    }
    100% {
        -webkit-transform: rotateX(32deg) rotateY(599deg) rotateZ(-24deg);
        transform: rotateX(32deg) rotateY(599deg) rotateZ(-24deg);
    }
}
#tree .branch_1_2_1::before {
    width: 4px;
}
#tree .branch_1_2_1_1 {
    width: 2px;
    -webkit-animation: shake1211 8000ms ease-in-out infinite alternate;
    animation: shake1211 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake1211 {
    0% {
        -webkit-transform: rotateX(-17deg) rotateY(692deg) rotateZ(-43deg);
        transform: rotateX(-17deg) rotateY(692deg) rotateZ(-43deg);
    }
    100% {
        -webkit-transform: rotateX(17deg) rotateY(98deg) rotateZ(0deg);
        transform: rotateX(17deg) rotateY(98deg) rotateZ(0deg);
    }
}
@keyframes shake1211 {
    0% {
        -webkit-transform: rotateX(-17deg) rotateY(692deg) rotateZ(-43deg);
        transform: rotateX(-17deg) rotateY(692deg) rotateZ(-43deg);
    }
    100% {
        -webkit-transform: rotateX(17deg) rotateY(98deg) rotateZ(0deg);
        transform: rotateX(17deg) rotateY(98deg) rotateZ(0deg);
    }
}
#tree .branch_1_2_1_1::before {
    width: 2px;
}
#tree .branch_1_2_1_1 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64a064;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_1_2_1_1 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64ae64;
}
#tree .branch_1_2_1_2 {
    width: 2px;
    -webkit-animation: shake1212 8000ms ease-in-out infinite alternate;
    animation: shake1212 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake1212 {
    0% {
        -webkit-transform: rotateX(7deg) rotateY(95deg) rotateZ(-30deg);
        transform: rotateX(7deg) rotateY(95deg) rotateZ(-30deg);
    }
    100% {
        -webkit-transform: rotateX(29deg) rotateY(297deg) rotateZ(20deg);
        transform: rotateX(29deg) rotateY(297deg) rotateZ(20deg);
    }
}
@keyframes shake1212 {
    0% {
        -webkit-transform: rotateX(7deg) rotateY(95deg) rotateZ(-30deg);
        transform: rotateX(7deg) rotateY(95deg) rotateZ(-30deg);
    }
    100% {
        -webkit-transform: rotateX(29deg) rotateY(297deg) rotateZ(20deg);
        transform: rotateX(29deg) rotateY(297deg) rotateZ(20deg);
    }
}
#tree .branch_1_2_1_2::before {
    width: 2px;
}
#tree .branch_1_2_1_2 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64af64;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_1_2_1_2 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64ed64;
}
#tree .branch_1_2_1_3 {
    width: 2px;
    -webkit-animation: shake1213 8000ms ease-in-out infinite alternate;
    animation: shake1213 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake1213 {
    0% {
        -webkit-transform: rotateX(-54deg) rotateY(162deg) rotateZ(-32deg);
        transform: rotateX(-54deg) rotateY(162deg) rotateZ(-32deg);
    }
    100% {
        -webkit-transform: rotateX(21deg) rotateY(173deg) rotateZ(-50deg);
        transform: rotateX(21deg) rotateY(173deg) rotateZ(-50deg);
    }
}
@keyframes shake1213 {
    0% {
        -webkit-transform: rotateX(-54deg) rotateY(162deg) rotateZ(-32deg);
        transform: rotateX(-54deg) rotateY(162deg) rotateZ(-32deg);
    }
    100% {
        -webkit-transform: rotateX(21deg) rotateY(173deg) rotateZ(-50deg);
        transform: rotateX(21deg) rotateY(173deg) rotateZ(-50deg);
    }
}
#tree .branch_1_2_1_3::before {
    width: 2px;
}
#tree .branch_1_2_1_3 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64b764;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_1_2_1_3 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64a264;
}
#tree .branch_1_2_2 {
    width: 4px;
    -webkit-animation: shake122 7000ms ease-in-out infinite alternate;
    animation: shake122 7000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake122 {
    0% {
        -webkit-transform: rotateX(-29deg) rotateY(489deg) rotateZ(-41deg);
        transform: rotateX(-29deg) rotateY(489deg) rotateZ(-41deg);
    }
    100% {
        -webkit-transform: rotateX(10deg) rotateY(461deg) rotateZ(-4deg);
        transform: rotateX(10deg) rotateY(461deg) rotateZ(-4deg);
    }
}
@keyframes shake122 {
    0% {
        -webkit-transform: rotateX(-29deg) rotateY(489deg) rotateZ(-41deg);
        transform: rotateX(-29deg) rotateY(489deg) rotateZ(-41deg);
    }
    100% {
        -webkit-transform: rotateX(10deg) rotateY(461deg) rotateZ(-4deg);
        transform: rotateX(10deg) rotateY(461deg) rotateZ(-4deg);
    }
}
#tree .branch_1_2_2::before {
    width: 4px;
}
#tree .branch_1_2_2_1 {
    width: 2px;
    -webkit-animation: shake1221 8000ms ease-in-out infinite alternate;
    animation: shake1221 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake1221 {
    0% {
        -webkit-transform: rotateX(-14deg) rotateY(544deg) rotateZ(42deg);
        transform: rotateX(-14deg) rotateY(544deg) rotateZ(42deg);
    }
    100% {
        -webkit-transform: rotateX(21deg) rotateY(667deg) rotateZ(54deg);
        transform: rotateX(21deg) rotateY(667deg) rotateZ(54deg);
    }
}
@keyframes shake1221 {
    0% {
        -webkit-transform: rotateX(-14deg) rotateY(544deg) rotateZ(42deg);
        transform: rotateX(-14deg) rotateY(544deg) rotateZ(42deg);
    }
    100% {
        -webkit-transform: rotateX(21deg) rotateY(667deg) rotateZ(54deg);
        transform: rotateX(21deg) rotateY(667deg) rotateZ(54deg);
    }
}
#tree .branch_1_2_2_1::before {
    width: 2px;
}
#tree .branch_1_2_2_1 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64c464;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_1_2_2_1 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64ae64;
}
#tree .branch_1_2_2_2 {
    width: 2px;
    -webkit-animation: shake1222 8000ms ease-in-out infinite alternate;
    animation: shake1222 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake1222 {
    0% {
        -webkit-transform: rotateX(-24deg) rotateY(652deg) rotateZ(-6deg);
        transform: rotateX(-24deg) rotateY(652deg) rotateZ(-6deg);
    }
    100% {
        -webkit-transform: rotateX(35deg) rotateY(144deg) rotateZ(32deg);
        transform: rotateX(35deg) rotateY(144deg) rotateZ(32deg);
    }
}
@keyframes shake1222 {
    0% {
        -webkit-transform: rotateX(-24deg) rotateY(652deg) rotateZ(-6deg);
        transform: rotateX(-24deg) rotateY(652deg) rotateZ(-6deg);
    }
    100% {
        -webkit-transform: rotateX(35deg) rotateY(144deg) rotateZ(32deg);
        transform: rotateX(35deg) rotateY(144deg) rotateZ(32deg);
    }
}
#tree .branch_1_2_2_2::before {
    width: 2px;
}
#tree .branch_1_2_2_2 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64a364;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_1_2_2_2 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64b364;
}
#tree .branch_1_2_2_3 {
    width: 2px;
    -webkit-animation: shake1223 8000ms ease-in-out infinite alternate;
    animation: shake1223 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake1223 {
    0% {
        -webkit-transform: rotateX(0deg) rotateY(241deg) rotateZ(-3deg);
        transform: rotateX(0deg) rotateY(241deg) rotateZ(-3deg);
    }
    100% {
        -webkit-transform: rotateX(12deg) rotateY(590deg) rotateZ(3deg);
        transform: rotateX(12deg) rotateY(590deg) rotateZ(3deg);
    }
}
@keyframes shake1223 {
    0% {
        -webkit-transform: rotateX(0deg) rotateY(241deg) rotateZ(-3deg);
        transform: rotateX(0deg) rotateY(241deg) rotateZ(-3deg);
    }
    100% {
        -webkit-transform: rotateX(12deg) rotateY(590deg) rotateZ(3deg);
        transform: rotateX(12deg) rotateY(590deg) rotateZ(3deg);
    }
}
#tree .branch_1_2_2_3::before {
    width: 2px;
}
#tree .branch_1_2_2_3 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #649764;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_1_2_2_3 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64f064;
}
#tree .branch_1_2_3 {
    width: 4px;
    -webkit-animation: shake123 7000ms ease-in-out infinite alternate;
    animation: shake123 7000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake123 {
    0% {
        -webkit-transform: rotateX(-2deg) rotateY(550deg) rotateZ(42deg);
        transform: rotateX(-2deg) rotateY(550deg) rotateZ(42deg);
    }
    100% {
        -webkit-transform: rotateX(16deg) rotateY(606deg) rotateZ(44deg);
        transform: rotateX(16deg) rotateY(606deg) rotateZ(44deg);
    }
}
@keyframes shake123 {
    0% {
        -webkit-transform: rotateX(-2deg) rotateY(550deg) rotateZ(42deg);
        transform: rotateX(-2deg) rotateY(550deg) rotateZ(42deg);
    }
    100% {
        -webkit-transform: rotateX(16deg) rotateY(606deg) rotateZ(44deg);
        transform: rotateX(16deg) rotateY(606deg) rotateZ(44deg);
    }
}
#tree .branch_1_2_3::before {
    width: 4px;
}
#tree .branch_1_2_3_1 {
    width: 2px;
    -webkit-animation: shake1231 8000ms ease-in-out infinite alternate;
    animation: shake1231 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake1231 {
    0% {
        -webkit-transform: rotateX(-16deg) rotateY(14deg) rotateZ(38deg);
        transform: rotateX(-16deg) rotateY(14deg) rotateZ(38deg);
    }
    100% {
        -webkit-transform: rotateX(46deg) rotateY(318deg) rotateZ(11deg);
        transform: rotateX(46deg) rotateY(318deg) rotateZ(11deg);
    }
}
@keyframes shake1231 {
    0% {
        -webkit-transform: rotateX(-16deg) rotateY(14deg) rotateZ(38deg);
        transform: rotateX(-16deg) rotateY(14deg) rotateZ(38deg);
    }
    100% {
        -webkit-transform: rotateX(46deg) rotateY(318deg) rotateZ(11deg);
        transform: rotateX(46deg) rotateY(318deg) rotateZ(11deg);
    }
}
#tree .branch_1_2_3_1::before {
    width: 2px;
}
#tree .branch_1_2_3_1 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64be64;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_1_2_3_1 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64e064;
}
#tree .branch_1_2_3_2 {
    width: 2px;
    -webkit-animation: shake1232 8000ms ease-in-out infinite alternate;
    animation: shake1232 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake1232 {
    0% {
        -webkit-transform: rotateX(29deg) rotateY(669deg) rotateZ(-37deg);
        transform: rotateX(29deg) rotateY(669deg) rotateZ(-37deg);
    }
    100% {
        -webkit-transform: rotateX(-32deg) rotateY(682deg) rotateZ(-30deg);
        transform: rotateX(-32deg) rotateY(682deg) rotateZ(-30deg);
    }
}
@keyframes shake1232 {
    0% {
        -webkit-transform: rotateX(29deg) rotateY(669deg) rotateZ(-37deg);
        transform: rotateX(29deg) rotateY(669deg) rotateZ(-37deg);
    }
    100% {
        -webkit-transform: rotateX(-32deg) rotateY(682deg) rotateZ(-30deg);
        transform: rotateX(-32deg) rotateY(682deg) rotateZ(-30deg);
    }
}
#tree .branch_1_2_3_2::before {
    width: 2px;
}
#tree .branch_1_2_3_2 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64b364;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_1_2_3_2 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64e064;
}
#tree .branch_1_2_3_3 {
    width: 2px;
    -webkit-animation: shake1233 8000ms ease-in-out infinite alternate;
    animation: shake1233 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake1233 {
    0% {
        -webkit-transform: rotateX(-28deg) rotateY(295deg) rotateZ(23deg);
        transform: rotateX(-28deg) rotateY(295deg) rotateZ(23deg);
    }
    100% {
        -webkit-transform: rotateX(31deg) rotateY(666deg) rotateZ(-7deg);
        transform: rotateX(31deg) rotateY(666deg) rotateZ(-7deg);
    }
}
@keyframes shake1233 {
    0% {
        -webkit-transform: rotateX(-28deg) rotateY(295deg) rotateZ(23deg);
        transform: rotateX(-28deg) rotateY(295deg) rotateZ(23deg);
    }
    100% {
        -webkit-transform: rotateX(31deg) rotateY(666deg) rotateZ(-7deg);
        transform: rotateX(31deg) rotateY(666deg) rotateZ(-7deg);
    }
}
#tree .branch_1_2_3_3::before {
    width: 2px;
}
#tree .branch_1_2_3_3 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #649b64;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_1_2_3_3 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64ab64;
}
#tree .branch_1_3 {
    width: 6px;
    -webkit-animation: shake13 6000ms ease-in-out infinite alternate;
    animation: shake13 6000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake13 {
    0% {
        -webkit-transform: rotateX(-47deg) rotateY(286deg) rotateZ(-11deg);
        transform: rotateX(-47deg) rotateY(286deg) rotateZ(-11deg);
    }
    100% {
        -webkit-transform: rotateX(-51deg) rotateY(14deg) rotateZ(-3deg);
        transform: rotateX(-51deg) rotateY(14deg) rotateZ(-3deg);
    }
}
@keyframes shake13 {
    0% {
        -webkit-transform: rotateX(-47deg) rotateY(286deg) rotateZ(-11deg);
        transform: rotateX(-47deg) rotateY(286deg) rotateZ(-11deg);
    }
    100% {
        -webkit-transform: rotateX(-51deg) rotateY(14deg) rotateZ(-3deg);
        transform: rotateX(-51deg) rotateY(14deg) rotateZ(-3deg);
    }
}
#tree .branch_1_3::before {
    width: 6px;
}
#tree .branch_1_3_1 {
    width: 4px;
    -webkit-animation: shake131 7000ms ease-in-out infinite alternate;
    animation: shake131 7000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake131 {
    0% {
        -webkit-transform: rotateX(-28deg) rotateY(585deg) rotateZ(43deg);
        transform: rotateX(-28deg) rotateY(585deg) rotateZ(43deg);
    }
    100% {
        -webkit-transform: rotateX(55deg) rotateY(140deg) rotateZ(-23deg);
        transform: rotateX(55deg) rotateY(140deg) rotateZ(-23deg);
    }
}
@keyframes shake131 {
    0% {
        -webkit-transform: rotateX(-28deg) rotateY(585deg) rotateZ(43deg);
        transform: rotateX(-28deg) rotateY(585deg) rotateZ(43deg);
    }
    100% {
        -webkit-transform: rotateX(55deg) rotateY(140deg) rotateZ(-23deg);
        transform: rotateX(55deg) rotateY(140deg) rotateZ(-23deg);
    }
}
#tree .branch_1_3_1::before {
    width: 4px;
}
#tree .branch_1_3_1_1 {
    width: 2px;
    -webkit-animation: shake1311 8000ms ease-in-out infinite alternate;
    animation: shake1311 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake1311 {
    0% {
        -webkit-transform: rotateX(-4deg) rotateY(433deg) rotateZ(59deg);
        transform: rotateX(-4deg) rotateY(433deg) rotateZ(59deg);
    }
    100% {
        -webkit-transform: rotateX(-56deg) rotateY(364deg) rotateZ(57deg);
        transform: rotateX(-56deg) rotateY(364deg) rotateZ(57deg);
    }
}
@keyframes shake1311 {
    0% {
        -webkit-transform: rotateX(-4deg) rotateY(433deg) rotateZ(59deg);
        transform: rotateX(-4deg) rotateY(433deg) rotateZ(59deg);
    }
    100% {
        -webkit-transform: rotateX(-56deg) rotateY(364deg) rotateZ(57deg);
        transform: rotateX(-56deg) rotateY(364deg) rotateZ(57deg);
    }
}
#tree .branch_1_3_1_1::before {
    width: 2px;
}
#tree .branch_1_3_1_1 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64af64;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_1_3_1_1 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64b764;
}
#tree .branch_1_3_1_2 {
    width: 2px;
    -webkit-animation: shake1312 8000ms ease-in-out infinite alternate;
    animation: shake1312 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake1312 {
    0% {
        -webkit-transform: rotateX(11deg) rotateY(147deg) rotateZ(42deg);
        transform: rotateX(11deg) rotateY(147deg) rotateZ(42deg);
    }
    100% {
        -webkit-transform: rotateX(-11deg) rotateY(334deg) rotateZ(3deg);
        transform: rotateX(-11deg) rotateY(334deg) rotateZ(3deg);
    }
}
@keyframes shake1312 {
    0% {
        -webkit-transform: rotateX(11deg) rotateY(147deg) rotateZ(42deg);
        transform: rotateX(11deg) rotateY(147deg) rotateZ(42deg);
    }
    100% {
        -webkit-transform: rotateX(-11deg) rotateY(334deg) rotateZ(3deg);
        transform: rotateX(-11deg) rotateY(334deg) rotateZ(3deg);
    }
}
#tree .branch_1_3_1_2::before {
    width: 2px;
}
#tree .branch_1_3_1_2 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64b064;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_1_3_1_2 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64ca64;
}
#tree .branch_1_3_1_3 {
    width: 2px;
    -webkit-animation: shake1313 8000ms ease-in-out infinite alternate;
    animation: shake1313 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake1313 {
    0% {
        -webkit-transform: rotateX(57deg) rotateY(514deg) rotateZ(-38deg);
        transform: rotateX(57deg) rotateY(514deg) rotateZ(-38deg);
    }
    100% {
        -webkit-transform: rotateX(43deg) rotateY(229deg) rotateZ(36deg);
        transform: rotateX(43deg) rotateY(229deg) rotateZ(36deg);
    }
}
@keyframes shake1313 {
    0% {
        -webkit-transform: rotateX(57deg) rotateY(514deg) rotateZ(-38deg);
        transform: rotateX(57deg) rotateY(514deg) rotateZ(-38deg);
    }
    100% {
        -webkit-transform: rotateX(43deg) rotateY(229deg) rotateZ(36deg);
        transform: rotateX(43deg) rotateY(229deg) rotateZ(36deg);
    }
}
#tree .branch_1_3_1_3::before {
    width: 2px;
}
#tree .branch_1_3_1_3 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #649a64;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_1_3_1_3 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64d464;
}
#tree .branch_1_3_2 {
    width: 4px;
    -webkit-animation: shake132 7000ms ease-in-out infinite alternate;
    animation: shake132 7000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake132 {
    0% {
        -webkit-transform: rotateX(56deg) rotateY(420deg) rotateZ(-33deg);
        transform: rotateX(56deg) rotateY(420deg) rotateZ(-33deg);
    }
    100% {
        -webkit-transform: rotateX(-28deg) rotateY(590deg) rotateZ(55deg);
        transform: rotateX(-28deg) rotateY(590deg) rotateZ(55deg);
    }
}
@keyframes shake132 {
    0% {
        -webkit-transform: rotateX(56deg) rotateY(420deg) rotateZ(-33deg);
        transform: rotateX(56deg) rotateY(420deg) rotateZ(-33deg);
    }
    100% {
        -webkit-transform: rotateX(-28deg) rotateY(590deg) rotateZ(55deg);
        transform: rotateX(-28deg) rotateY(590deg) rotateZ(55deg);
    }
}
#tree .branch_1_3_2::before {
    width: 4px;
}
#tree .branch_1_3_2_1 {
    width: 2px;
    -webkit-animation: shake1321 8000ms ease-in-out infinite alternate;
    animation: shake1321 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake1321 {
    0% {
        -webkit-transform: rotateX(-15deg) rotateY(105deg) rotateZ(38deg);
        transform: rotateX(-15deg) rotateY(105deg) rotateZ(38deg);
    }
    100% {
        -webkit-transform: rotateX(-45deg) rotateY(20deg) rotateZ(2deg);
        transform: rotateX(-45deg) rotateY(20deg) rotateZ(2deg);
    }
}
@keyframes shake1321 {
    0% {
        -webkit-transform: rotateX(-15deg) rotateY(105deg) rotateZ(38deg);
        transform: rotateX(-15deg) rotateY(105deg) rotateZ(38deg);
    }
    100% {
        -webkit-transform: rotateX(-45deg) rotateY(20deg) rotateZ(2deg);
        transform: rotateX(-45deg) rotateY(20deg) rotateZ(2deg);
    }
}
#tree .branch_1_3_2_1::before {
    width: 2px;
}
#tree .branch_1_3_2_1 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #649f64;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_1_3_2_1 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64cd64;
}
#tree .branch_1_3_2_2 {
    width: 2px;
    -webkit-animation: shake1322 8000ms ease-in-out infinite alternate;
    animation: shake1322 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake1322 {
    0% {
        -webkit-transform: rotateX(57deg) rotateY(178deg) rotateZ(-40deg);
        transform: rotateX(57deg) rotateY(178deg) rotateZ(-40deg);
    }
    100% {
        -webkit-transform: rotateX(-11deg) rotateY(265deg) rotateZ(42deg);
        transform: rotateX(-11deg) rotateY(265deg) rotateZ(42deg);
    }
}
@keyframes shake1322 {
    0% {
        -webkit-transform: rotateX(57deg) rotateY(178deg) rotateZ(-40deg);
        transform: rotateX(57deg) rotateY(178deg) rotateZ(-40deg);
    }
    100% {
        -webkit-transform: rotateX(-11deg) rotateY(265deg) rotateZ(42deg);
        transform: rotateX(-11deg) rotateY(265deg) rotateZ(42deg);
    }
}
#tree .branch_1_3_2_2::before {
    width: 2px;
}
#tree .branch_1_3_2_2 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64a064;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_1_3_2_2 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64b564;
}
#tree .branch_1_3_2_3 {
    width: 2px;
    -webkit-animation: shake1323 8000ms ease-in-out infinite alternate;
    animation: shake1323 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake1323 {
    0% {
        -webkit-transform: rotateX(-1deg) rotateY(368deg) rotateZ(54deg);
        transform: rotateX(-1deg) rotateY(368deg) rotateZ(54deg);
    }
    100% {
        -webkit-transform: rotateX(59deg) rotateY(497deg) rotateZ(-58deg);
        transform: rotateX(59deg) rotateY(497deg) rotateZ(-58deg);
    }
}
@keyframes shake1323 {
    0% {
        -webkit-transform: rotateX(-1deg) rotateY(368deg) rotateZ(54deg);
        transform: rotateX(-1deg) rotateY(368deg) rotateZ(54deg);
    }
    100% {
        -webkit-transform: rotateX(59deg) rotateY(497deg) rotateZ(-58deg);
        transform: rotateX(59deg) rotateY(497deg) rotateZ(-58deg);
    }
}
#tree .branch_1_3_2_3::before {
    width: 2px;
}
#tree .branch_1_3_2_3 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #649a64;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_1_3_2_3 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64c764;
}
#tree .branch_1_3_3 {
    width: 4px;
    -webkit-animation: shake133 7000ms ease-in-out infinite alternate;
    animation: shake133 7000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake133 {
    0% {
        -webkit-transform: rotateX(-10deg) rotateY(610deg) rotateZ(-16deg);
        transform: rotateX(-10deg) rotateY(610deg) rotateZ(-16deg);
    }
    100% {
        -webkit-transform: rotateX(35deg) rotateY(108deg) rotateZ(4deg);
        transform: rotateX(35deg) rotateY(108deg) rotateZ(4deg);
    }
}
@keyframes shake133 {
    0% {
        -webkit-transform: rotateX(-10deg) rotateY(610deg) rotateZ(-16deg);
        transform: rotateX(-10deg) rotateY(610deg) rotateZ(-16deg);
    }
    100% {
        -webkit-transform: rotateX(35deg) rotateY(108deg) rotateZ(4deg);
        transform: rotateX(35deg) rotateY(108deg) rotateZ(4deg);
    }
}
#tree .branch_1_3_3::before {
    width: 4px;
}
#tree .branch_1_3_3_1 {
    width: 2px;
    -webkit-animation: shake1331 8000ms ease-in-out infinite alternate;
    animation: shake1331 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake1331 {
    0% {
        -webkit-transform: rotateX(46deg) rotateY(603deg) rotateZ(22deg);
        transform: rotateX(46deg) rotateY(603deg) rotateZ(22deg);
    }
    100% {
        -webkit-transform: rotateX(17deg) rotateY(397deg) rotateZ(11deg);
        transform: rotateX(17deg) rotateY(397deg) rotateZ(11deg);
    }
}
@keyframes shake1331 {
    0% {
        -webkit-transform: rotateX(46deg) rotateY(603deg) rotateZ(22deg);
        transform: rotateX(46deg) rotateY(603deg) rotateZ(22deg);
    }
    100% {
        -webkit-transform: rotateX(17deg) rotateY(397deg) rotateZ(11deg);
        transform: rotateX(17deg) rotateY(397deg) rotateZ(11deg);
    }
}
#tree .branch_1_3_3_1::before {
    width: 2px;
}
#tree .branch_1_3_3_1 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64af64;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_1_3_3_1 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64df64;
}
#tree .branch_1_3_3_2 {
    width: 2px;
    -webkit-animation: shake1332 8000ms ease-in-out infinite alternate;
    animation: shake1332 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake1332 {
    0% {
        -webkit-transform: rotateX(-30deg) rotateY(529deg) rotateZ(29deg);
        transform: rotateX(-30deg) rotateY(529deg) rotateZ(29deg);
    }
    100% {
        -webkit-transform: rotateX(-52deg) rotateY(231deg) rotateZ(-1deg);
        transform: rotateX(-52deg) rotateY(231deg) rotateZ(-1deg);
    }
}
@keyframes shake1332 {
    0% {
        -webkit-transform: rotateX(-30deg) rotateY(529deg) rotateZ(29deg);
        transform: rotateX(-30deg) rotateY(529deg) rotateZ(29deg);
    }
    100% {
        -webkit-transform: rotateX(-52deg) rotateY(231deg) rotateZ(-1deg);
        transform: rotateX(-52deg) rotateY(231deg) rotateZ(-1deg);
    }
}
#tree .branch_1_3_3_2::before {
    width: 2px;
}
#tree .branch_1_3_3_2 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64ad64;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_1_3_3_2 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64df64;
}
#tree .branch_1_3_3_3 {
    width: 2px;
    -webkit-animation: shake1333 8000ms ease-in-out infinite alternate;
    animation: shake1333 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake1333 {
    0% {
        -webkit-transform: rotateX(1deg) rotateY(32deg) rotateZ(-50deg);
        transform: rotateX(1deg) rotateY(32deg) rotateZ(-50deg);
    }
    100% {
        -webkit-transform: rotateX(56deg) rotateY(655deg) rotateZ(26deg);
        transform: rotateX(56deg) rotateY(655deg) rotateZ(26deg);
    }
}
@keyframes shake1333 {
    0% {
        -webkit-transform: rotateX(1deg) rotateY(32deg) rotateZ(-50deg);
        transform: rotateX(1deg) rotateY(32deg) rotateZ(-50deg);
    }
    100% {
        -webkit-transform: rotateX(56deg) rotateY(655deg) rotateZ(26deg);
        transform: rotateX(56deg) rotateY(655deg) rotateZ(26deg);
    }
}
#tree .branch_1_3_3_3::before {
    width: 2px;
}
#tree .branch_1_3_3_3 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64c864;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_1_3_3_3 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64a164;
}
#tree .branch_2 {
    width: 8px;
    -webkit-animation: shake2 5000ms ease-in-out infinite alternate;
    animation: shake2 5000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake2 {
    0% {
        -webkit-transform: rotateX(-33deg) rotateY(98deg) rotateZ(-13deg);
        transform: rotateX(-33deg) rotateY(98deg) rotateZ(-13deg);
    }
    100% {
        -webkit-transform: rotateX(-58deg) rotateY(500deg) rotateZ(26deg);
        transform: rotateX(-58deg) rotateY(500deg) rotateZ(26deg);
    }
}
@keyframes shake2 {
    0% {
        -webkit-transform: rotateX(-33deg) rotateY(98deg) rotateZ(-13deg);
        transform: rotateX(-33deg) rotateY(98deg) rotateZ(-13deg);
    }
    100% {
        -webkit-transform: rotateX(-58deg) rotateY(500deg) rotateZ(26deg);
        transform: rotateX(-58deg) rotateY(500deg) rotateZ(26deg);
    }
}
#tree .branch_2::before {
    width: 8px;
}
#tree .branch_2_1 {
    width: 6px;
    -webkit-animation: shake21 6000ms ease-in-out infinite alternate;
    animation: shake21 6000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake21 {
    0% {
        -webkit-transform: rotateX(-15deg) rotateY(577deg) rotateZ(10deg);
        transform: rotateX(-15deg) rotateY(577deg) rotateZ(10deg);
    }
    100% {
        -webkit-transform: rotateX(-45deg) rotateY(259deg) rotateZ(7deg);
        transform: rotateX(-45deg) rotateY(259deg) rotateZ(7deg);
    }
}
@keyframes shake21 {
    0% {
        -webkit-transform: rotateX(-15deg) rotateY(577deg) rotateZ(10deg);
        transform: rotateX(-15deg) rotateY(577deg) rotateZ(10deg);
    }
    100% {
        -webkit-transform: rotateX(-45deg) rotateY(259deg) rotateZ(7deg);
        transform: rotateX(-45deg) rotateY(259deg) rotateZ(7deg);
    }
}
#tree .branch_2_1::before {
    width: 6px;
}
#tree .branch_2_1_1 {
    width: 4px;
    -webkit-animation: shake211 7000ms ease-in-out infinite alternate;
    animation: shake211 7000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake211 {
    0% {
        -webkit-transform: rotateX(-3deg) rotateY(472deg) rotateZ(38deg);
        transform: rotateX(-3deg) rotateY(472deg) rotateZ(38deg);
    }
    100% {
        -webkit-transform: rotateX(53deg) rotateY(2deg) rotateZ(54deg);
        transform: rotateX(53deg) rotateY(2deg) rotateZ(54deg);
    }
}
@keyframes shake211 {
    0% {
        -webkit-transform: rotateX(-3deg) rotateY(472deg) rotateZ(38deg);
        transform: rotateX(-3deg) rotateY(472deg) rotateZ(38deg);
    }
    100% {
        -webkit-transform: rotateX(53deg) rotateY(2deg) rotateZ(54deg);
        transform: rotateX(53deg) rotateY(2deg) rotateZ(54deg);
    }
}
#tree .branch_2_1_1::before {
    width: 4px;
}
#tree .branch_2_1_1_1 {
    width: 2px;
    -webkit-animation: shake2111 8000ms ease-in-out infinite alternate;
    animation: shake2111 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake2111 {
    0% {
        -webkit-transform: rotateX(-35deg) rotateY(452deg) rotateZ(3deg);
        transform: rotateX(-35deg) rotateY(452deg) rotateZ(3deg);
    }
    100% {
        -webkit-transform: rotateX(12deg) rotateY(240deg) rotateZ(-44deg);
        transform: rotateX(12deg) rotateY(240deg) rotateZ(-44deg);
    }
}
@keyframes shake2111 {
    0% {
        -webkit-transform: rotateX(-35deg) rotateY(452deg) rotateZ(3deg);
        transform: rotateX(-35deg) rotateY(452deg) rotateZ(3deg);
    }
    100% {
        -webkit-transform: rotateX(12deg) rotateY(240deg) rotateZ(-44deg);
        transform: rotateX(12deg) rotateY(240deg) rotateZ(-44deg);
    }
}
#tree .branch_2_1_1_1::before {
    width: 2px;
}
#tree .branch_2_1_1_1 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64b764;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_2_1_1_1 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64a064;
}
#tree .branch_2_1_1_2 {
    width: 2px;
    -webkit-animation: shake2112 8000ms ease-in-out infinite alternate;
    animation: shake2112 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake2112 {
    0% {
        -webkit-transform: rotateX(41deg) rotateY(625deg) rotateZ(-47deg);
        transform: rotateX(41deg) rotateY(625deg) rotateZ(-47deg);
    }
    100% {
        -webkit-transform: rotateX(47deg) rotateY(271deg) rotateZ(46deg);
        transform: rotateX(47deg) rotateY(271deg) rotateZ(46deg);
    }
}
@keyframes shake2112 {
    0% {
        -webkit-transform: rotateX(41deg) rotateY(625deg) rotateZ(-47deg);
        transform: rotateX(41deg) rotateY(625deg) rotateZ(-47deg);
    }
    100% {
        -webkit-transform: rotateX(47deg) rotateY(271deg) rotateZ(46deg);
        transform: rotateX(47deg) rotateY(271deg) rotateZ(46deg);
    }
}
#tree .branch_2_1_1_2::before {
    width: 2px;
}
#tree .branch_2_1_1_2 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #649864;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_2_1_1_2 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #649e64;
}
#tree .branch_2_1_1_3 {
    width: 2px;
    -webkit-animation: shake2113 8000ms ease-in-out infinite alternate;
    animation: shake2113 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake2113 {
    0% {
        -webkit-transform: rotateX(-53deg) rotateY(6deg) rotateZ(29deg);
        transform: rotateX(-53deg) rotateY(6deg) rotateZ(29deg);
    }
    100% {
        -webkit-transform: rotateX(7deg) rotateY(354deg) rotateZ(-30deg);
        transform: rotateX(7deg) rotateY(354deg) rotateZ(-30deg);
    }
}
@keyframes shake2113 {
    0% {
        -webkit-transform: rotateX(-53deg) rotateY(6deg) rotateZ(29deg);
        transform: rotateX(-53deg) rotateY(6deg) rotateZ(29deg);
    }
    100% {
        -webkit-transform: rotateX(7deg) rotateY(354deg) rotateZ(-30deg);
        transform: rotateX(7deg) rotateY(354deg) rotateZ(-30deg);
    }
}
#tree .branch_2_1_1_3::before {
    width: 2px;
}
#tree .branch_2_1_1_3 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64a264;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_2_1_1_3 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64de64;
}
#tree .branch_2_1_2 {
    width: 4px;
    -webkit-animation: shake212 7000ms ease-in-out infinite alternate;
    animation: shake212 7000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake212 {
    0% {
        -webkit-transform: rotateX(23deg) rotateY(502deg) rotateZ(-27deg);
        transform: rotateX(23deg) rotateY(502deg) rotateZ(-27deg);
    }
    100% {
        -webkit-transform: rotateX(-42deg) rotateY(357deg) rotateZ(16deg);
        transform: rotateX(-42deg) rotateY(357deg) rotateZ(16deg);
    }
}
@keyframes shake212 {
    0% {
        -webkit-transform: rotateX(23deg) rotateY(502deg) rotateZ(-27deg);
        transform: rotateX(23deg) rotateY(502deg) rotateZ(-27deg);
    }
    100% {
        -webkit-transform: rotateX(-42deg) rotateY(357deg) rotateZ(16deg);
        transform: rotateX(-42deg) rotateY(357deg) rotateZ(16deg);
    }
}
#tree .branch_2_1_2::before {
    width: 4px;
}
#tree .branch_2_1_2_1 {
    width: 2px;
    -webkit-animation: shake2121 8000ms ease-in-out infinite alternate;
    animation: shake2121 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake2121 {
    0% {
        -webkit-transform: rotateX(-50deg) rotateY(578deg) rotateZ(-24deg);
        transform: rotateX(-50deg) rotateY(578deg) rotateZ(-24deg);
    }
    100% {
        -webkit-transform: rotateX(-34deg) rotateY(108deg) rotateZ(22deg);
        transform: rotateX(-34deg) rotateY(108deg) rotateZ(22deg);
    }
}
@keyframes shake2121 {
    0% {
        -webkit-transform: rotateX(-50deg) rotateY(578deg) rotateZ(-24deg);
        transform: rotateX(-50deg) rotateY(578deg) rotateZ(-24deg);
    }
    100% {
        -webkit-transform: rotateX(-34deg) rotateY(108deg) rotateZ(22deg);
        transform: rotateX(-34deg) rotateY(108deg) rotateZ(22deg);
    }
}
#tree .branch_2_1_2_1::before {
    width: 2px;
}
#tree .branch_2_1_2_1 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64ae64;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_2_1_2_1 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64a964;
}
#tree .branch_2_1_2_2 {
    width: 2px;
    -webkit-animation: shake2122 8000ms ease-in-out infinite alternate;
    animation: shake2122 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake2122 {
    0% {
        -webkit-transform: rotateX(-25deg) rotateY(260deg) rotateZ(45deg);
        transform: rotateX(-25deg) rotateY(260deg) rotateZ(45deg);
    }
    100% {
        -webkit-transform: rotateX(-45deg) rotateY(539deg) rotateZ(-47deg);
        transform: rotateX(-45deg) rotateY(539deg) rotateZ(-47deg);
    }
}
@keyframes shake2122 {
    0% {
        -webkit-transform: rotateX(-25deg) rotateY(260deg) rotateZ(45deg);
        transform: rotateX(-25deg) rotateY(260deg) rotateZ(45deg);
    }
    100% {
        -webkit-transform: rotateX(-45deg) rotateY(539deg) rotateZ(-47deg);
        transform: rotateX(-45deg) rotateY(539deg) rotateZ(-47deg);
    }
}
#tree .branch_2_1_2_2::before {
    width: 2px;
}
#tree .branch_2_1_2_2 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64b464;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_2_1_2_2 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64a764;
}
#tree .branch_2_1_2_3 {
    width: 2px;
    -webkit-animation: shake2123 8000ms ease-in-out infinite alternate;
    animation: shake2123 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake2123 {
    0% {
        -webkit-transform: rotateX(26deg) rotateY(595deg) rotateZ(32deg);
        transform: rotateX(26deg) rotateY(595deg) rotateZ(32deg);
    }
    100% {
        -webkit-transform: rotateX(32deg) rotateY(17deg) rotateZ(-40deg);
        transform: rotateX(32deg) rotateY(17deg) rotateZ(-40deg);
    }
}
@keyframes shake2123 {
    0% {
        -webkit-transform: rotateX(26deg) rotateY(595deg) rotateZ(32deg);
        transform: rotateX(26deg) rotateY(595deg) rotateZ(32deg);
    }
    100% {
        -webkit-transform: rotateX(32deg) rotateY(17deg) rotateZ(-40deg);
        transform: rotateX(32deg) rotateY(17deg) rotateZ(-40deg);
    }
}
#tree .branch_2_1_2_3::before {
    width: 2px;
}
#tree .branch_2_1_2_3 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64c864;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_2_1_2_3 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64ef64;
}
#tree .branch_2_1_3 {
    width: 4px;
    -webkit-animation: shake213 7000ms ease-in-out infinite alternate;
    animation: shake213 7000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake213 {
    0% {
        -webkit-transform: rotateX(18deg) rotateY(171deg) rotateZ(-32deg);
        transform: rotateX(18deg) rotateY(171deg) rotateZ(-32deg);
    }
    100% {
        -webkit-transform: rotateX(16deg) rotateY(501deg) rotateZ(51deg);
        transform: rotateX(16deg) rotateY(501deg) rotateZ(51deg);
    }
}
@keyframes shake213 {
    0% {
        -webkit-transform: rotateX(18deg) rotateY(171deg) rotateZ(-32deg);
        transform: rotateX(18deg) rotateY(171deg) rotateZ(-32deg);
    }
    100% {
        -webkit-transform: rotateX(16deg) rotateY(501deg) rotateZ(51deg);
        transform: rotateX(16deg) rotateY(501deg) rotateZ(51deg);
    }
}
#tree .branch_2_1_3::before {
    width: 4px;
}
#tree .branch_2_1_3_1 {
    width: 2px;
    -webkit-animation: shake2131 8000ms ease-in-out infinite alternate;
    animation: shake2131 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake2131 {
    0% {
        -webkit-transform: rotateX(24deg) rotateY(485deg) rotateZ(34deg);
        transform: rotateX(24deg) rotateY(485deg) rotateZ(34deg);
    }
    100% {
        -webkit-transform: rotateX(-39deg) rotateY(275deg) rotateZ(47deg);
        transform: rotateX(-39deg) rotateY(275deg) rotateZ(47deg);
    }
}
@keyframes shake2131 {
    0% {
        -webkit-transform: rotateX(24deg) rotateY(485deg) rotateZ(34deg);
        transform: rotateX(24deg) rotateY(485deg) rotateZ(34deg);
    }
    100% {
        -webkit-transform: rotateX(-39deg) rotateY(275deg) rotateZ(47deg);
        transform: rotateX(-39deg) rotateY(275deg) rotateZ(47deg);
    }
}
#tree .branch_2_1_3_1::before {
    width: 2px;
}
#tree .branch_2_1_3_1 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64a764;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_2_1_3_1 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64c464;
}
#tree .branch_2_1_3_2 {
    width: 2px;
    -webkit-animation: shake2132 8000ms ease-in-out infinite alternate;
    animation: shake2132 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake2132 {
    0% {
        -webkit-transform: rotateX(34deg) rotateY(497deg) rotateZ(47deg);
        transform: rotateX(34deg) rotateY(497deg) rotateZ(47deg);
    }
    100% {
        -webkit-transform: rotateX(-56deg) rotateY(570deg) rotateZ(-24deg);
        transform: rotateX(-56deg) rotateY(570deg) rotateZ(-24deg);
    }
}
@keyframes shake2132 {
    0% {
        -webkit-transform: rotateX(34deg) rotateY(497deg) rotateZ(47deg);
        transform: rotateX(34deg) rotateY(497deg) rotateZ(47deg);
    }
    100% {
        -webkit-transform: rotateX(-56deg) rotateY(570deg) rotateZ(-24deg);
        transform: rotateX(-56deg) rotateY(570deg) rotateZ(-24deg);
    }
}
#tree .branch_2_1_3_2::before {
    width: 2px;
}
#tree .branch_2_1_3_2 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64c064;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_2_1_3_2 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64ad64;
}
#tree .branch_2_1_3_3 {
    width: 2px;
    -webkit-animation: shake2133 8000ms ease-in-out infinite alternate;
    animation: shake2133 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake2133 {
    0% {
        -webkit-transform: rotateX(7deg) rotateY(700deg) rotateZ(49deg);
        transform: rotateX(7deg) rotateY(700deg) rotateZ(49deg);
    }
    100% {
        -webkit-transform: rotateX(-24deg) rotateY(424deg) rotateZ(17deg);
        transform: rotateX(-24deg) rotateY(424deg) rotateZ(17deg);
    }
}
@keyframes shake2133 {
    0% {
        -webkit-transform: rotateX(7deg) rotateY(700deg) rotateZ(49deg);
        transform: rotateX(7deg) rotateY(700deg) rotateZ(49deg);
    }
    100% {
        -webkit-transform: rotateX(-24deg) rotateY(424deg) rotateZ(17deg);
        transform: rotateX(-24deg) rotateY(424deg) rotateZ(17deg);
    }
}
#tree .branch_2_1_3_3::before {
    width: 2px;
}
#tree .branch_2_1_3_3 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64b164;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_2_1_3_3 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64f464;
}
#tree .branch_2_2 {
    width: 6px;
    -webkit-animation: shake22 6000ms ease-in-out infinite alternate;
    animation: shake22 6000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake22 {
    0% {
        -webkit-transform: rotateX(21deg) rotateY(475deg) rotateZ(-47deg);
        transform: rotateX(21deg) rotateY(475deg) rotateZ(-47deg);
    }
    100% {
        -webkit-transform: rotateX(-54deg) rotateY(509deg) rotateZ(1deg);
        transform: rotateX(-54deg) rotateY(509deg) rotateZ(1deg);
    }
}
@keyframes shake22 {
    0% {
        -webkit-transform: rotateX(21deg) rotateY(475deg) rotateZ(-47deg);
        transform: rotateX(21deg) rotateY(475deg) rotateZ(-47deg);
    }
    100% {
        -webkit-transform: rotateX(-54deg) rotateY(509deg) rotateZ(1deg);
        transform: rotateX(-54deg) rotateY(509deg) rotateZ(1deg);
    }
}
#tree .branch_2_2::before {
    width: 6px;
}
#tree .branch_2_2_1 {
    width: 4px;
    -webkit-animation: shake221 7000ms ease-in-out infinite alternate;
    animation: shake221 7000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake221 {
    0% {
        -webkit-transform: rotateX(7deg) rotateY(698deg) rotateZ(12deg);
        transform: rotateX(7deg) rotateY(698deg) rotateZ(12deg);
    }
    100% {
        -webkit-transform: rotateX(59deg) rotateY(59deg) rotateZ(-42deg);
        transform: rotateX(59deg) rotateY(59deg) rotateZ(-42deg);
    }
}
@keyframes shake221 {
    0% {
        -webkit-transform: rotateX(7deg) rotateY(698deg) rotateZ(12deg);
        transform: rotateX(7deg) rotateY(698deg) rotateZ(12deg);
    }
    100% {
        -webkit-transform: rotateX(59deg) rotateY(59deg) rotateZ(-42deg);
        transform: rotateX(59deg) rotateY(59deg) rotateZ(-42deg);
    }
}
#tree .branch_2_2_1::before {
    width: 4px;
}
#tree .branch_2_2_1_1 {
    width: 2px;
    -webkit-animation: shake2211 8000ms ease-in-out infinite alternate;
    animation: shake2211 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake2211 {
    0% {
        -webkit-transform: rotateX(10deg) rotateY(381deg) rotateZ(28deg);
        transform: rotateX(10deg) rotateY(381deg) rotateZ(28deg);
    }
    100% {
        -webkit-transform: rotateX(-35deg) rotateY(608deg) rotateZ(-23deg);
        transform: rotateX(-35deg) rotateY(608deg) rotateZ(-23deg);
    }
}
@keyframes shake2211 {
    0% {
        -webkit-transform: rotateX(10deg) rotateY(381deg) rotateZ(28deg);
        transform: rotateX(10deg) rotateY(381deg) rotateZ(28deg);
    }
    100% {
        -webkit-transform: rotateX(-35deg) rotateY(608deg) rotateZ(-23deg);
        transform: rotateX(-35deg) rotateY(608deg) rotateZ(-23deg);
    }
}
#tree .branch_2_2_1_1::before {
    width: 2px;
}
#tree .branch_2_2_1_1 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64b964;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_2_2_1_1 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64e364;
}
#tree .branch_2_2_1_2 {
    width: 2px;
    -webkit-animation: shake2212 8000ms ease-in-out infinite alternate;
    animation: shake2212 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake2212 {
    0% {
        -webkit-transform: rotateX(-47deg) rotateY(277deg) rotateZ(-41deg);
        transform: rotateX(-47deg) rotateY(277deg) rotateZ(-41deg);
    }
    100% {
        -webkit-transform: rotateX(-28deg) rotateY(695deg) rotateZ(28deg);
        transform: rotateX(-28deg) rotateY(695deg) rotateZ(28deg);
    }
}
@keyframes shake2212 {
    0% {
        -webkit-transform: rotateX(-47deg) rotateY(277deg) rotateZ(-41deg);
        transform: rotateX(-47deg) rotateY(277deg) rotateZ(-41deg);
    }
    100% {
        -webkit-transform: rotateX(-28deg) rotateY(695deg) rotateZ(28deg);
        transform: rotateX(-28deg) rotateY(695deg) rotateZ(28deg);
    }
}
#tree .branch_2_2_1_2::before {
    width: 2px;
}
#tree .branch_2_2_1_2 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #649c64;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_2_2_1_2 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64b464;
}
#tree .branch_2_2_1_3 {
    width: 2px;
    -webkit-animation: shake2213 8000ms ease-in-out infinite alternate;
    animation: shake2213 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake2213 {
    0% {
        -webkit-transform: rotateX(-43deg) rotateY(163deg) rotateZ(-13deg);
        transform: rotateX(-43deg) rotateY(163deg) rotateZ(-13deg);
    }
    100% {
        -webkit-transform: rotateX(51deg) rotateY(584deg) rotateZ(33deg);
        transform: rotateX(51deg) rotateY(584deg) rotateZ(33deg);
    }
}
@keyframes shake2213 {
    0% {
        -webkit-transform: rotateX(-43deg) rotateY(163deg) rotateZ(-13deg);
        transform: rotateX(-43deg) rotateY(163deg) rotateZ(-13deg);
    }
    100% {
        -webkit-transform: rotateX(51deg) rotateY(584deg) rotateZ(33deg);
        transform: rotateX(51deg) rotateY(584deg) rotateZ(33deg);
    }
}
#tree .branch_2_2_1_3::before {
    width: 2px;
}
#tree .branch_2_2_1_3 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64c164;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_2_2_1_3 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64e564;
}
#tree .branch_2_2_2 {
    width: 4px;
    -webkit-animation: shake222 7000ms ease-in-out infinite alternate;
    animation: shake222 7000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake222 {
    0% {
        -webkit-transform: rotateX(20deg) rotateY(370deg) rotateZ(-37deg);
        transform: rotateX(20deg) rotateY(370deg) rotateZ(-37deg);
    }
    100% {
        -webkit-transform: rotateX(-44deg) rotateY(720deg) rotateZ(-52deg);
        transform: rotateX(-44deg) rotateY(720deg) rotateZ(-52deg);
    }
}
@keyframes shake222 {
    0% {
        -webkit-transform: rotateX(20deg) rotateY(370deg) rotateZ(-37deg);
        transform: rotateX(20deg) rotateY(370deg) rotateZ(-37deg);
    }
    100% {
        -webkit-transform: rotateX(-44deg) rotateY(720deg) rotateZ(-52deg);
        transform: rotateX(-44deg) rotateY(720deg) rotateZ(-52deg);
    }
}
#tree .branch_2_2_2::before {
    width: 4px;
}
#tree .branch_2_2_2_1 {
    width: 2px;
    -webkit-animation: shake2221 8000ms ease-in-out infinite alternate;
    animation: shake2221 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake2221 {
    0% {
        -webkit-transform: rotateX(10deg) rotateY(37deg) rotateZ(-52deg);
        transform: rotateX(10deg) rotateY(37deg) rotateZ(-52deg);
    }
    100% {
        -webkit-transform: rotateX(-53deg) rotateY(272deg) rotateZ(-38deg);
        transform: rotateX(-53deg) rotateY(272deg) rotateZ(-38deg);
    }
}
@keyframes shake2221 {
    0% {
        -webkit-transform: rotateX(10deg) rotateY(37deg) rotateZ(-52deg);
        transform: rotateX(10deg) rotateY(37deg) rotateZ(-52deg);
    }
    100% {
        -webkit-transform: rotateX(-53deg) rotateY(272deg) rotateZ(-38deg);
        transform: rotateX(-53deg) rotateY(272deg) rotateZ(-38deg);
    }
}
#tree .branch_2_2_2_1::before {
    width: 2px;
}
#tree .branch_2_2_2_1 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64a864;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_2_2_2_1 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64b364;
}
#tree .branch_2_2_2_2 {
    width: 2px;
    -webkit-animation: shake2222 8000ms ease-in-out infinite alternate;
    animation: shake2222 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake2222 {
    0% {
        -webkit-transform: rotateX(35deg) rotateY(677deg) rotateZ(-18deg);
        transform: rotateX(35deg) rotateY(677deg) rotateZ(-18deg);
    }
    100% {
        -webkit-transform: rotateX(-34deg) rotateY(708deg) rotateZ(42deg);
        transform: rotateX(-34deg) rotateY(708deg) rotateZ(42deg);
    }
}
@keyframes shake2222 {
    0% {
        -webkit-transform: rotateX(35deg) rotateY(677deg) rotateZ(-18deg);
        transform: rotateX(35deg) rotateY(677deg) rotateZ(-18deg);
    }
    100% {
        -webkit-transform: rotateX(-34deg) rotateY(708deg) rotateZ(42deg);
        transform: rotateX(-34deg) rotateY(708deg) rotateZ(42deg);
    }
}
#tree .branch_2_2_2_2::before {
    width: 2px;
}
#tree .branch_2_2_2_2 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64c064;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_2_2_2_2 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64ca64;
}
#tree .branch_2_2_2_3 {
    width: 2px;
    -webkit-animation: shake2223 8000ms ease-in-out infinite alternate;
    animation: shake2223 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake2223 {
    0% {
        -webkit-transform: rotateX(6deg) rotateY(313deg) rotateZ(-45deg);
        transform: rotateX(6deg) rotateY(313deg) rotateZ(-45deg);
    }
    100% {
        -webkit-transform: rotateX(58deg) rotateY(627deg) rotateZ(30deg);
        transform: rotateX(58deg) rotateY(627deg) rotateZ(30deg);
    }
}
@keyframes shake2223 {
    0% {
        -webkit-transform: rotateX(6deg) rotateY(313deg) rotateZ(-45deg);
        transform: rotateX(6deg) rotateY(313deg) rotateZ(-45deg);
    }
    100% {
        -webkit-transform: rotateX(58deg) rotateY(627deg) rotateZ(30deg);
        transform: rotateX(58deg) rotateY(627deg) rotateZ(30deg);
    }
}
#tree .branch_2_2_2_3::before {
    width: 2px;
}
#tree .branch_2_2_2_3 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64b464;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_2_2_2_3 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64e664;
}
#tree .branch_2_2_3 {
    width: 4px;
    -webkit-animation: shake223 7000ms ease-in-out infinite alternate;
    animation: shake223 7000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake223 {
    0% {
        -webkit-transform: rotateX(44deg) rotateY(362deg) rotateZ(39deg);
        transform: rotateX(44deg) rotateY(362deg) rotateZ(39deg);
    }
    100% {
        -webkit-transform: rotateX(-28deg) rotateY(196deg) rotateZ(1deg);
        transform: rotateX(-28deg) rotateY(196deg) rotateZ(1deg);
    }
}
@keyframes shake223 {
    0% {
        -webkit-transform: rotateX(44deg) rotateY(362deg) rotateZ(39deg);
        transform: rotateX(44deg) rotateY(362deg) rotateZ(39deg);
    }
    100% {
        -webkit-transform: rotateX(-28deg) rotateY(196deg) rotateZ(1deg);
        transform: rotateX(-28deg) rotateY(196deg) rotateZ(1deg);
    }
}
#tree .branch_2_2_3::before {
    width: 4px;
}
#tree .branch_2_2_3_1 {
    width: 2px;
    -webkit-animation: shake2231 8000ms ease-in-out infinite alternate;
    animation: shake2231 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake2231 {
    0% {
        -webkit-transform: rotateX(8deg) rotateY(262deg) rotateZ(31deg);
        transform: rotateX(8deg) rotateY(262deg) rotateZ(31deg);
    }
    100% {
        -webkit-transform: rotateX(-31deg) rotateY(214deg) rotateZ(43deg);
        transform: rotateX(-31deg) rotateY(214deg) rotateZ(43deg);
    }
}
@keyframes shake2231 {
    0% {
        -webkit-transform: rotateX(8deg) rotateY(262deg) rotateZ(31deg);
        transform: rotateX(8deg) rotateY(262deg) rotateZ(31deg);
    }
    100% {
        -webkit-transform: rotateX(-31deg) rotateY(214deg) rotateZ(43deg);
        transform: rotateX(-31deg) rotateY(214deg) rotateZ(43deg);
    }
}
#tree .branch_2_2_3_1::before {
    width: 2px;
}
#tree .branch_2_2_3_1 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64a264;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_2_2_3_1 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64bf64;
}
#tree .branch_2_2_3_2 {
    width: 2px;
    -webkit-animation: shake2232 8000ms ease-in-out infinite alternate;
    animation: shake2232 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake2232 {
    0% {
        -webkit-transform: rotateX(37deg) rotateY(220deg) rotateZ(39deg);
        transform: rotateX(37deg) rotateY(220deg) rotateZ(39deg);
    }
    100% {
        -webkit-transform: rotateX(-55deg) rotateY(461deg) rotateZ(52deg);
        transform: rotateX(-55deg) rotateY(461deg) rotateZ(52deg);
    }
}
@keyframes shake2232 {
    0% {
        -webkit-transform: rotateX(37deg) rotateY(220deg) rotateZ(39deg);
        transform: rotateX(37deg) rotateY(220deg) rotateZ(39deg);
    }
    100% {
        -webkit-transform: rotateX(-55deg) rotateY(461deg) rotateZ(52deg);
        transform: rotateX(-55deg) rotateY(461deg) rotateZ(52deg);
    }
}
#tree .branch_2_2_3_2::before {
    width: 2px;
}
#tree .branch_2_2_3_2 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64c464;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_2_2_3_2 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64ab64;
}
#tree .branch_2_2_3_3 {
    width: 2px;
    -webkit-animation: shake2233 8000ms ease-in-out infinite alternate;
    animation: shake2233 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake2233 {
    0% {
        -webkit-transform: rotateX(2deg) rotateY(365deg) rotateZ(-9deg);
        transform: rotateX(2deg) rotateY(365deg) rotateZ(-9deg);
    }
    100% {
        -webkit-transform: rotateX(3deg) rotateY(402deg) rotateZ(-2deg);
        transform: rotateX(3deg) rotateY(402deg) rotateZ(-2deg);
    }
}
@keyframes shake2233 {
    0% {
        -webkit-transform: rotateX(2deg) rotateY(365deg) rotateZ(-9deg);
        transform: rotateX(2deg) rotateY(365deg) rotateZ(-9deg);
    }
    100% {
        -webkit-transform: rotateX(3deg) rotateY(402deg) rotateZ(-2deg);
        transform: rotateX(3deg) rotateY(402deg) rotateZ(-2deg);
    }
}
#tree .branch_2_2_3_3::before {
    width: 2px;
}
#tree .branch_2_2_3_3 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64c364;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_2_2_3_3 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64a964;
}
#tree .branch_2_3 {
    width: 6px;
    -webkit-animation: shake23 6000ms ease-in-out infinite alternate;
    animation: shake23 6000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake23 {
    0% {
        -webkit-transform: rotateX(-57deg) rotateY(571deg) rotateZ(-10deg);
        transform: rotateX(-57deg) rotateY(571deg) rotateZ(-10deg);
    }
    100% {
        -webkit-transform: rotateX(28deg) rotateY(702deg) rotateZ(56deg);
        transform: rotateX(28deg) rotateY(702deg) rotateZ(56deg);
    }
}
@keyframes shake23 {
    0% {
        -webkit-transform: rotateX(-57deg) rotateY(571deg) rotateZ(-10deg);
        transform: rotateX(-57deg) rotateY(571deg) rotateZ(-10deg);
    }
    100% {
        -webkit-transform: rotateX(28deg) rotateY(702deg) rotateZ(56deg);
        transform: rotateX(28deg) rotateY(702deg) rotateZ(56deg);
    }
}
#tree .branch_2_3::before {
    width: 6px;
}
#tree .branch_2_3_1 {
    width: 4px;
    -webkit-animation: shake231 7000ms ease-in-out infinite alternate;
    animation: shake231 7000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake231 {
    0% {
        -webkit-transform: rotateX(-3deg) rotateY(312deg) rotateZ(-2deg);
        transform: rotateX(-3deg) rotateY(312deg) rotateZ(-2deg);
    }
    100% {
        -webkit-transform: rotateX(15deg) rotateY(522deg) rotateZ(-6deg);
        transform: rotateX(15deg) rotateY(522deg) rotateZ(-6deg);
    }
}
@keyframes shake231 {
    0% {
        -webkit-transform: rotateX(-3deg) rotateY(312deg) rotateZ(-2deg);
        transform: rotateX(-3deg) rotateY(312deg) rotateZ(-2deg);
    }
    100% {
        -webkit-transform: rotateX(15deg) rotateY(522deg) rotateZ(-6deg);
        transform: rotateX(15deg) rotateY(522deg) rotateZ(-6deg);
    }
}
#tree .branch_2_3_1::before {
    width: 4px;
}
#tree .branch_2_3_1_1 {
    width: 2px;
    -webkit-animation: shake2311 8000ms ease-in-out infinite alternate;
    animation: shake2311 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake2311 {
    0% {
        -webkit-transform: rotateX(-32deg) rotateY(279deg) rotateZ(-31deg);
        transform: rotateX(-32deg) rotateY(279deg) rotateZ(-31deg);
    }
    100% {
        -webkit-transform: rotateX(5deg) rotateY(80deg) rotateZ(-34deg);
        transform: rotateX(5deg) rotateY(80deg) rotateZ(-34deg);
    }
}
@keyframes shake2311 {
    0% {
        -webkit-transform: rotateX(-32deg) rotateY(279deg) rotateZ(-31deg);
        transform: rotateX(-32deg) rotateY(279deg) rotateZ(-31deg);
    }
    100% {
        -webkit-transform: rotateX(5deg) rotateY(80deg) rotateZ(-34deg);
        transform: rotateX(5deg) rotateY(80deg) rotateZ(-34deg);
    }
}
#tree .branch_2_3_1_1::before {
    width: 2px;
}
#tree .branch_2_3_1_1 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64a664;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_2_3_1_1 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64a964;
}
#tree .branch_2_3_1_2 {
    width: 2px;
    -webkit-animation: shake2312 8000ms ease-in-out infinite alternate;
    animation: shake2312 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake2312 {
    0% {
        -webkit-transform: rotateX(-36deg) rotateY(311deg) rotateZ(21deg);
        transform: rotateX(-36deg) rotateY(311deg) rotateZ(21deg);
    }
    100% {
        -webkit-transform: rotateX(-24deg) rotateY(455deg) rotateZ(24deg);
        transform: rotateX(-24deg) rotateY(455deg) rotateZ(24deg);
    }
}
@keyframes shake2312 {
    0% {
        -webkit-transform: rotateX(-36deg) rotateY(311deg) rotateZ(21deg);
        transform: rotateX(-36deg) rotateY(311deg) rotateZ(21deg);
    }
    100% {
        -webkit-transform: rotateX(-24deg) rotateY(455deg) rotateZ(24deg);
        transform: rotateX(-24deg) rotateY(455deg) rotateZ(24deg);
    }
}
#tree .branch_2_3_1_2::before {
    width: 2px;
}
#tree .branch_2_3_1_2 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64a564;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_2_3_1_2 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64ba64;
}
#tree .branch_2_3_1_3 {
    width: 2px;
    -webkit-animation: shake2313 8000ms ease-in-out infinite alternate;
    animation: shake2313 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake2313 {
    0% {
        -webkit-transform: rotateX(39deg) rotateY(18deg) rotateZ(41deg);
        transform: rotateX(39deg) rotateY(18deg) rotateZ(41deg);
    }
    100% {
        -webkit-transform: rotateX(-33deg) rotateY(527deg) rotateZ(57deg);
        transform: rotateX(-33deg) rotateY(527deg) rotateZ(57deg);
    }
}
@keyframes shake2313 {
    0% {
        -webkit-transform: rotateX(39deg) rotateY(18deg) rotateZ(41deg);
        transform: rotateX(39deg) rotateY(18deg) rotateZ(41deg);
    }
    100% {
        -webkit-transform: rotateX(-33deg) rotateY(527deg) rotateZ(57deg);
        transform: rotateX(-33deg) rotateY(527deg) rotateZ(57deg);
    }
}
#tree .branch_2_3_1_3::before {
    width: 2px;
}
#tree .branch_2_3_1_3 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64c364;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_2_3_1_3 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64b064;
}
#tree .branch_2_3_2 {
    width: 4px;
    -webkit-animation: shake232 7000ms ease-in-out infinite alternate;
    animation: shake232 7000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake232 {
    0% {
        -webkit-transform: rotateX(43deg) rotateY(449deg) rotateZ(42deg);
        transform: rotateX(43deg) rotateY(449deg) rotateZ(42deg);
    }
    100% {
        -webkit-transform: rotateX(2deg) rotateY(554deg) rotateZ(-20deg);
        transform: rotateX(2deg) rotateY(554deg) rotateZ(-20deg);
    }
}
@keyframes shake232 {
    0% {
        -webkit-transform: rotateX(43deg) rotateY(449deg) rotateZ(42deg);
        transform: rotateX(43deg) rotateY(449deg) rotateZ(42deg);
    }
    100% {
        -webkit-transform: rotateX(2deg) rotateY(554deg) rotateZ(-20deg);
        transform: rotateX(2deg) rotateY(554deg) rotateZ(-20deg);
    }
}
#tree .branch_2_3_2::before {
    width: 4px;
}
#tree .branch_2_3_2_1 {
    width: 2px;
    -webkit-animation: shake2321 8000ms ease-in-out infinite alternate;
    animation: shake2321 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake2321 {
    0% {
        -webkit-transform: rotateX(42deg) rotateY(46deg) rotateZ(17deg);
        transform: rotateX(42deg) rotateY(46deg) rotateZ(17deg);
    }
    100% {
        -webkit-transform: rotateX(-8deg) rotateY(591deg) rotateZ(26deg);
        transform: rotateX(-8deg) rotateY(591deg) rotateZ(26deg);
    }
}
@keyframes shake2321 {
    0% {
        -webkit-transform: rotateX(42deg) rotateY(46deg) rotateZ(17deg);
        transform: rotateX(42deg) rotateY(46deg) rotateZ(17deg);
    }
    100% {
        -webkit-transform: rotateX(-8deg) rotateY(591deg) rotateZ(26deg);
        transform: rotateX(-8deg) rotateY(591deg) rotateZ(26deg);
    }
}
#tree .branch_2_3_2_1::before {
    width: 2px;
}
#tree .branch_2_3_2_1 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64ad64;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_2_3_2_1 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #649e64;
}
#tree .branch_2_3_2_2 {
    width: 2px;
    -webkit-animation: shake2322 8000ms ease-in-out infinite alternate;
    animation: shake2322 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake2322 {
    0% {
        -webkit-transform: rotateX(37deg) rotateY(678deg) rotateZ(1deg);
        transform: rotateX(37deg) rotateY(678deg) rotateZ(1deg);
    }
    100% {
        -webkit-transform: rotateX(51deg) rotateY(378deg) rotateZ(10deg);
        transform: rotateX(51deg) rotateY(378deg) rotateZ(10deg);
    }
}
@keyframes shake2322 {
    0% {
        -webkit-transform: rotateX(37deg) rotateY(678deg) rotateZ(1deg);
        transform: rotateX(37deg) rotateY(678deg) rotateZ(1deg);
    }
    100% {
        -webkit-transform: rotateX(51deg) rotateY(378deg) rotateZ(10deg);
        transform: rotateX(51deg) rotateY(378deg) rotateZ(10deg);
    }
}
#tree .branch_2_3_2_2::before {
    width: 2px;
}
#tree .branch_2_3_2_2 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64a164;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_2_3_2_2 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64be64;
}
#tree .branch_2_3_2_3 {
    width: 2px;
    -webkit-animation: shake2323 8000ms ease-in-out infinite alternate;
    animation: shake2323 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake2323 {
    0% {
        -webkit-transform: rotateX(-57deg) rotateY(22deg) rotateZ(32deg);
        transform: rotateX(-57deg) rotateY(22deg) rotateZ(32deg);
    }
    100% {
        -webkit-transform: rotateX(28deg) rotateY(551deg) rotateZ(-39deg);
        transform: rotateX(28deg) rotateY(551deg) rotateZ(-39deg);
    }
}
@keyframes shake2323 {
    0% {
        -webkit-transform: rotateX(-57deg) rotateY(22deg) rotateZ(32deg);
        transform: rotateX(-57deg) rotateY(22deg) rotateZ(32deg);
    }
    100% {
        -webkit-transform: rotateX(28deg) rotateY(551deg) rotateZ(-39deg);
        transform: rotateX(28deg) rotateY(551deg) rotateZ(-39deg);
    }
}
#tree .branch_2_3_2_3::before {
    width: 2px;
}
#tree .branch_2_3_2_3 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64a264;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_2_3_2_3 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64a864;
}
#tree .branch_2_3_3 {
    width: 4px;
    -webkit-animation: shake233 7000ms ease-in-out infinite alternate;
    animation: shake233 7000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake233 {
    0% {
        -webkit-transform: rotateX(48deg) rotateY(710deg) rotateZ(-3deg);
        transform: rotateX(48deg) rotateY(710deg) rotateZ(-3deg);
    }
    100% {
        -webkit-transform: rotateX(17deg) rotateY(673deg) rotateZ(-54deg);
        transform: rotateX(17deg) rotateY(673deg) rotateZ(-54deg);
    }
}
@keyframes shake233 {
    0% {
        -webkit-transform: rotateX(48deg) rotateY(710deg) rotateZ(-3deg);
        transform: rotateX(48deg) rotateY(710deg) rotateZ(-3deg);
    }
    100% {
        -webkit-transform: rotateX(17deg) rotateY(673deg) rotateZ(-54deg);
        transform: rotateX(17deg) rotateY(673deg) rotateZ(-54deg);
    }
}
#tree .branch_2_3_3::before {
    width: 4px;
}
#tree .branch_2_3_3_1 {
    width: 2px;
    -webkit-animation: shake2331 8000ms ease-in-out infinite alternate;
    animation: shake2331 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake2331 {
    0% {
        -webkit-transform: rotateX(-39deg) rotateY(421deg) rotateZ(3deg);
        transform: rotateX(-39deg) rotateY(421deg) rotateZ(3deg);
    }
    100% {
        -webkit-transform: rotateX(57deg) rotateY(555deg) rotateZ(-31deg);
        transform: rotateX(57deg) rotateY(555deg) rotateZ(-31deg);
    }
}
@keyframes shake2331 {
    0% {
        -webkit-transform: rotateX(-39deg) rotateY(421deg) rotateZ(3deg);
        transform: rotateX(-39deg) rotateY(421deg) rotateZ(3deg);
    }
    100% {
        -webkit-transform: rotateX(57deg) rotateY(555deg) rotateZ(-31deg);
        transform: rotateX(57deg) rotateY(555deg) rotateZ(-31deg);
    }
}
#tree .branch_2_3_3_1::before {
    width: 2px;
}
#tree .branch_2_3_3_1 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64be64;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_2_3_3_1 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64e064;
}
#tree .branch_2_3_3_2 {
    width: 2px;
    -webkit-animation: shake2332 8000ms ease-in-out infinite alternate;
    animation: shake2332 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake2332 {
    0% {
        -webkit-transform: rotateX(-56deg) rotateY(148deg) rotateZ(14deg);
        transform: rotateX(-56deg) rotateY(148deg) rotateZ(14deg);
    }
    100% {
        -webkit-transform: rotateX(-40deg) rotateY(564deg) rotateZ(16deg);
        transform: rotateX(-40deg) rotateY(564deg) rotateZ(16deg);
    }
}
@keyframes shake2332 {
    0% {
        -webkit-transform: rotateX(-56deg) rotateY(148deg) rotateZ(14deg);
        transform: rotateX(-56deg) rotateY(148deg) rotateZ(14deg);
    }
    100% {
        -webkit-transform: rotateX(-40deg) rotateY(564deg) rotateZ(16deg);
        transform: rotateX(-40deg) rotateY(564deg) rotateZ(16deg);
    }
}
#tree .branch_2_3_3_2::before {
    width: 2px;
}
#tree .branch_2_3_3_2 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64c564;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_2_3_3_2 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64ac64;
}
#tree .branch_2_3_3_3 {
    width: 2px;
    -webkit-animation: shake2333 8000ms ease-in-out infinite alternate;
    animation: shake2333 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake2333 {
    0% {
        -webkit-transform: rotateX(55deg) rotateY(98deg) rotateZ(-4deg);
        transform: rotateX(55deg) rotateY(98deg) rotateZ(-4deg);
    }
    100% {
        -webkit-transform: rotateX(20deg) rotateY(460deg) rotateZ(-5deg);
        transform: rotateX(20deg) rotateY(460deg) rotateZ(-5deg);
    }
}
@keyframes shake2333 {
    0% {
        -webkit-transform: rotateX(55deg) rotateY(98deg) rotateZ(-4deg);
        transform: rotateX(55deg) rotateY(98deg) rotateZ(-4deg);
    }
    100% {
        -webkit-transform: rotateX(20deg) rotateY(460deg) rotateZ(-5deg);
        transform: rotateX(20deg) rotateY(460deg) rotateZ(-5deg);
    }
}
#tree .branch_2_3_3_3::before {
    width: 2px;
}
#tree .branch_2_3_3_3 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64a864;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_2_3_3_3 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64a064;
}
#tree .branch_3 {
    width: 8px;
    -webkit-animation: shake3 5000ms ease-in-out infinite alternate;
    animation: shake3 5000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake3 {
    0% {
        -webkit-transform: rotateX(-35deg) rotateY(346deg) rotateZ(51deg);
        transform: rotateX(-35deg) rotateY(346deg) rotateZ(51deg);
    }
    100% {
        -webkit-transform: rotateX(-4deg) rotateY(717deg) rotateZ(16deg);
        transform: rotateX(-4deg) rotateY(717deg) rotateZ(16deg);
    }
}
@keyframes shake3 {
    0% {
        -webkit-transform: rotateX(-35deg) rotateY(346deg) rotateZ(51deg);
        transform: rotateX(-35deg) rotateY(346deg) rotateZ(51deg);
    }
    100% {
        -webkit-transform: rotateX(-4deg) rotateY(717deg) rotateZ(16deg);
        transform: rotateX(-4deg) rotateY(717deg) rotateZ(16deg);
    }
}
#tree .branch_3::before {
    width: 8px;
}
#tree .branch_3_1 {
    width: 6px;
    -webkit-animation: shake31 6000ms ease-in-out infinite alternate;
    animation: shake31 6000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake31 {
    0% {
        -webkit-transform: rotateX(-52deg) rotateY(364deg) rotateZ(6deg);
        transform: rotateX(-52deg) rotateY(364deg) rotateZ(6deg);
    }
    100% {
        -webkit-transform: rotateX(50deg) rotateY(227deg) rotateZ(7deg);
        transform: rotateX(50deg) rotateY(227deg) rotateZ(7deg);
    }
}
@keyframes shake31 {
    0% {
        -webkit-transform: rotateX(-52deg) rotateY(364deg) rotateZ(6deg);
        transform: rotateX(-52deg) rotateY(364deg) rotateZ(6deg);
    }
    100% {
        -webkit-transform: rotateX(50deg) rotateY(227deg) rotateZ(7deg);
        transform: rotateX(50deg) rotateY(227deg) rotateZ(7deg);
    }
}
#tree .branch_3_1::before {
    width: 6px;
}
#tree .branch_3_1_1 {
    width: 4px;
    -webkit-animation: shake311 7000ms ease-in-out infinite alternate;
    animation: shake311 7000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake311 {
    0% {
        -webkit-transform: rotateX(-13deg) rotateY(81deg) rotateZ(-55deg);
        transform: rotateX(-13deg) rotateY(81deg) rotateZ(-55deg);
    }
    100% {
        -webkit-transform: rotateX(-56deg) rotateY(107deg) rotateZ(21deg);
        transform: rotateX(-56deg) rotateY(107deg) rotateZ(21deg);
    }
}
@keyframes shake311 {
    0% {
        -webkit-transform: rotateX(-13deg) rotateY(81deg) rotateZ(-55deg);
        transform: rotateX(-13deg) rotateY(81deg) rotateZ(-55deg);
    }
    100% {
        -webkit-transform: rotateX(-56deg) rotateY(107deg) rotateZ(21deg);
        transform: rotateX(-56deg) rotateY(107deg) rotateZ(21deg);
    }
}
#tree .branch_3_1_1::before {
    width: 4px;
}
#tree .branch_3_1_1_1 {
    width: 2px;
    -webkit-animation: shake3111 8000ms ease-in-out infinite alternate;
    animation: shake3111 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake3111 {
    0% {
        -webkit-transform: rotateX(51deg) rotateY(89deg) rotateZ(3deg);
        transform: rotateX(51deg) rotateY(89deg) rotateZ(3deg);
    }
    100% {
        -webkit-transform: rotateX(-56deg) rotateY(460deg) rotateZ(2deg);
        transform: rotateX(-56deg) rotateY(460deg) rotateZ(2deg);
    }
}
@keyframes shake3111 {
    0% {
        -webkit-transform: rotateX(51deg) rotateY(89deg) rotateZ(3deg);
        transform: rotateX(51deg) rotateY(89deg) rotateZ(3deg);
    }
    100% {
        -webkit-transform: rotateX(-56deg) rotateY(460deg) rotateZ(2deg);
        transform: rotateX(-56deg) rotateY(460deg) rotateZ(2deg);
    }
}
#tree .branch_3_1_1_1::before {
    width: 2px;
}
#tree .branch_3_1_1_1 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64a964;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_3_1_1_1 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64f164;
}
#tree .branch_3_1_1_2 {
    width: 2px;
    -webkit-animation: shake3112 8000ms ease-in-out infinite alternate;
    animation: shake3112 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake3112 {
    0% {
        -webkit-transform: rotateX(-21deg) rotateY(124deg) rotateZ(-15deg);
        transform: rotateX(-21deg) rotateY(124deg) rotateZ(-15deg);
    }
    100% {
        -webkit-transform: rotateX(55deg) rotateY(638deg) rotateZ(-6deg);
        transform: rotateX(55deg) rotateY(638deg) rotateZ(-6deg);
    }
}
@keyframes shake3112 {
    0% {
        -webkit-transform: rotateX(-21deg) rotateY(124deg) rotateZ(-15deg);
        transform: rotateX(-21deg) rotateY(124deg) rotateZ(-15deg);
    }
    100% {
        -webkit-transform: rotateX(55deg) rotateY(638deg) rotateZ(-6deg);
        transform: rotateX(55deg) rotateY(638deg) rotateZ(-6deg);
    }
}
#tree .branch_3_1_1_2::before {
    width: 2px;
}
#tree .branch_3_1_1_2 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64c164;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_3_1_1_2 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64e664;
}
#tree .branch_3_1_1_3 {
    width: 2px;
    -webkit-animation: shake3113 8000ms ease-in-out infinite alternate;
    animation: shake3113 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake3113 {
    0% {
        -webkit-transform: rotateX(-50deg) rotateY(120deg) rotateZ(4deg);
        transform: rotateX(-50deg) rotateY(120deg) rotateZ(4deg);
    }
    100% {
        -webkit-transform: rotateX(-49deg) rotateY(263deg) rotateZ(-24deg);
        transform: rotateX(-49deg) rotateY(263deg) rotateZ(-24deg);
    }
}
@keyframes shake3113 {
    0% {
        -webkit-transform: rotateX(-50deg) rotateY(120deg) rotateZ(4deg);
        transform: rotateX(-50deg) rotateY(120deg) rotateZ(4deg);
    }
    100% {
        -webkit-transform: rotateX(-49deg) rotateY(263deg) rotateZ(-24deg);
        transform: rotateX(-49deg) rotateY(263deg) rotateZ(-24deg);
    }
}
#tree .branch_3_1_1_3::before {
    width: 2px;
}
#tree .branch_3_1_1_3 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64a464;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_3_1_1_3 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64d264;
}
#tree .branch_3_1_2 {
    width: 4px;
    -webkit-animation: shake312 7000ms ease-in-out infinite alternate;
    animation: shake312 7000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake312 {
    0% {
        -webkit-transform: rotateX(-10deg) rotateY(360deg) rotateZ(-46deg);
        transform: rotateX(-10deg) rotateY(360deg) rotateZ(-46deg);
    }
    100% {
        -webkit-transform: rotateX(47deg) rotateY(458deg) rotateZ(50deg);
        transform: rotateX(47deg) rotateY(458deg) rotateZ(50deg);
    }
}
@keyframes shake312 {
    0% {
        -webkit-transform: rotateX(-10deg) rotateY(360deg) rotateZ(-46deg);
        transform: rotateX(-10deg) rotateY(360deg) rotateZ(-46deg);
    }
    100% {
        -webkit-transform: rotateX(47deg) rotateY(458deg) rotateZ(50deg);
        transform: rotateX(47deg) rotateY(458deg) rotateZ(50deg);
    }
}
#tree .branch_3_1_2::before {
    width: 4px;
}
#tree .branch_3_1_2_1 {
    width: 2px;
    -webkit-animation: shake3121 8000ms ease-in-out infinite alternate;
    animation: shake3121 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake3121 {
    0% {
        -webkit-transform: rotateX(30deg) rotateY(523deg) rotateZ(44deg);
        transform: rotateX(30deg) rotateY(523deg) rotateZ(44deg);
    }
    100% {
        -webkit-transform: rotateX(9deg) rotateY(634deg) rotateZ(-15deg);
        transform: rotateX(9deg) rotateY(634deg) rotateZ(-15deg);
    }
}
@keyframes shake3121 {
    0% {
        -webkit-transform: rotateX(30deg) rotateY(523deg) rotateZ(44deg);
        transform: rotateX(30deg) rotateY(523deg) rotateZ(44deg);
    }
    100% {
        -webkit-transform: rotateX(9deg) rotateY(634deg) rotateZ(-15deg);
        transform: rotateX(9deg) rotateY(634deg) rotateZ(-15deg);
    }
}
#tree .branch_3_1_2_1::before {
    width: 2px;
}
#tree .branch_3_1_2_1 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64c264;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_3_1_2_1 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64f764;
}
#tree .branch_3_1_2_2 {
    width: 2px;
    -webkit-animation: shake3122 8000ms ease-in-out infinite alternate;
    animation: shake3122 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake3122 {
    0% {
        -webkit-transform: rotateX(-8deg) rotateY(132deg) rotateZ(34deg);
        transform: rotateX(-8deg) rotateY(132deg) rotateZ(34deg);
    }
    100% {
        -webkit-transform: rotateX(15deg) rotateY(417deg) rotateZ(34deg);
        transform: rotateX(15deg) rotateY(417deg) rotateZ(34deg);
    }
}
@keyframes shake3122 {
    0% {
        -webkit-transform: rotateX(-8deg) rotateY(132deg) rotateZ(34deg);
        transform: rotateX(-8deg) rotateY(132deg) rotateZ(34deg);
    }
    100% {
        -webkit-transform: rotateX(15deg) rotateY(417deg) rotateZ(34deg);
        transform: rotateX(15deg) rotateY(417deg) rotateZ(34deg);
    }
}
#tree .branch_3_1_2_2::before {
    width: 2px;
}
#tree .branch_3_1_2_2 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64a864;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_3_1_2_2 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64fa64;
}
#tree .branch_3_1_2_3 {
    width: 2px;
    -webkit-animation: shake3123 8000ms ease-in-out infinite alternate;
    animation: shake3123 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake3123 {
    0% {
        -webkit-transform: rotateX(-37deg) rotateY(410deg) rotateZ(-59deg);
        transform: rotateX(-37deg) rotateY(410deg) rotateZ(-59deg);
    }
    100% {
        -webkit-transform: rotateX(41deg) rotateY(570deg) rotateZ(51deg);
        transform: rotateX(41deg) rotateY(570deg) rotateZ(51deg);
    }
}
@keyframes shake3123 {
    0% {
        -webkit-transform: rotateX(-37deg) rotateY(410deg) rotateZ(-59deg);
        transform: rotateX(-37deg) rotateY(410deg) rotateZ(-59deg);
    }
    100% {
        -webkit-transform: rotateX(41deg) rotateY(570deg) rotateZ(51deg);
        transform: rotateX(41deg) rotateY(570deg) rotateZ(51deg);
    }
}
#tree .branch_3_1_2_3::before {
    width: 2px;
}
#tree .branch_3_1_2_3 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64b064;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_3_1_2_3 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64f164;
}
#tree .branch_3_1_3 {
    width: 4px;
    -webkit-animation: shake313 7000ms ease-in-out infinite alternate;
    animation: shake313 7000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake313 {
    0% {
        -webkit-transform: rotateX(21deg) rotateY(200deg) rotateZ(-10deg);
        transform: rotateX(21deg) rotateY(200deg) rotateZ(-10deg);
    }
    100% {
        -webkit-transform: rotateX(23deg) rotateY(339deg) rotateZ(10deg);
        transform: rotateX(23deg) rotateY(339deg) rotateZ(10deg);
    }
}
@keyframes shake313 {
    0% {
        -webkit-transform: rotateX(21deg) rotateY(200deg) rotateZ(-10deg);
        transform: rotateX(21deg) rotateY(200deg) rotateZ(-10deg);
    }
    100% {
        -webkit-transform: rotateX(23deg) rotateY(339deg) rotateZ(10deg);
        transform: rotateX(23deg) rotateY(339deg) rotateZ(10deg);
    }
}
#tree .branch_3_1_3::before {
    width: 4px;
}
#tree .branch_3_1_3_1 {
    width: 2px;
    -webkit-animation: shake3131 8000ms ease-in-out infinite alternate;
    animation: shake3131 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake3131 {
    0% {
        -webkit-transform: rotateX(17deg) rotateY(54deg) rotateZ(-49deg);
        transform: rotateX(17deg) rotateY(54deg) rotateZ(-49deg);
    }
    100% {
        -webkit-transform: rotateX(-19deg) rotateY(147deg) rotateZ(-29deg);
        transform: rotateX(-19deg) rotateY(147deg) rotateZ(-29deg);
    }
}
@keyframes shake3131 {
    0% {
        -webkit-transform: rotateX(17deg) rotateY(54deg) rotateZ(-49deg);
        transform: rotateX(17deg) rotateY(54deg) rotateZ(-49deg);
    }
    100% {
        -webkit-transform: rotateX(-19deg) rotateY(147deg) rotateZ(-29deg);
        transform: rotateX(-19deg) rotateY(147deg) rotateZ(-29deg);
    }
}
#tree .branch_3_1_3_1::before {
    width: 2px;
}
#tree .branch_3_1_3_1 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64c764;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_3_1_3_1 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64f364;
}
#tree .branch_3_1_3_2 {
    width: 2px;
    -webkit-animation: shake3132 8000ms ease-in-out infinite alternate;
    animation: shake3132 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake3132 {
    0% {
        -webkit-transform: rotateX(-36deg) rotateY(393deg) rotateZ(-5deg);
        transform: rotateX(-36deg) rotateY(393deg) rotateZ(-5deg);
    }
    100% {
        -webkit-transform: rotateX(19deg) rotateY(636deg) rotateZ(12deg);
        transform: rotateX(19deg) rotateY(636deg) rotateZ(12deg);
    }
}
@keyframes shake3132 {
    0% {
        -webkit-transform: rotateX(-36deg) rotateY(393deg) rotateZ(-5deg);
        transform: rotateX(-36deg) rotateY(393deg) rotateZ(-5deg);
    }
    100% {
        -webkit-transform: rotateX(19deg) rotateY(636deg) rotateZ(12deg);
        transform: rotateX(19deg) rotateY(636deg) rotateZ(12deg);
    }
}
#tree .branch_3_1_3_2::before {
    width: 2px;
}
#tree .branch_3_1_3_2 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64a664;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_3_1_3_2 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #649c64;
}
#tree .branch_3_1_3_3 {
    width: 2px;
    -webkit-animation: shake3133 8000ms ease-in-out infinite alternate;
    animation: shake3133 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake3133 {
    0% {
        -webkit-transform: rotateX(-51deg) rotateY(101deg) rotateZ(55deg);
        transform: rotateX(-51deg) rotateY(101deg) rotateZ(55deg);
    }
    100% {
        -webkit-transform: rotateX(-37deg) rotateY(597deg) rotateZ(-19deg);
        transform: rotateX(-37deg) rotateY(597deg) rotateZ(-19deg);
    }
}
@keyframes shake3133 {
    0% {
        -webkit-transform: rotateX(-51deg) rotateY(101deg) rotateZ(55deg);
        transform: rotateX(-51deg) rotateY(101deg) rotateZ(55deg);
    }
    100% {
        -webkit-transform: rotateX(-37deg) rotateY(597deg) rotateZ(-19deg);
        transform: rotateX(-37deg) rotateY(597deg) rotateZ(-19deg);
    }
}
#tree .branch_3_1_3_3::before {
    width: 2px;
}
#tree .branch_3_1_3_3 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64c564;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_3_1_3_3 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #649964;
}
#tree .branch_3_2 {
    width: 6px;
    -webkit-animation: shake32 6000ms ease-in-out infinite alternate;
    animation: shake32 6000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake32 {
    0% {
        -webkit-transform: rotateX(35deg) rotateY(406deg) rotateZ(3deg);
        transform: rotateX(35deg) rotateY(406deg) rotateZ(3deg);
    }
    100% {
        -webkit-transform: rotateX(-28deg) rotateY(612deg) rotateZ(-54deg);
        transform: rotateX(-28deg) rotateY(612deg) rotateZ(-54deg);
    }
}
@keyframes shake32 {
    0% {
        -webkit-transform: rotateX(35deg) rotateY(406deg) rotateZ(3deg);
        transform: rotateX(35deg) rotateY(406deg) rotateZ(3deg);
    }
    100% {
        -webkit-transform: rotateX(-28deg) rotateY(612deg) rotateZ(-54deg);
        transform: rotateX(-28deg) rotateY(612deg) rotateZ(-54deg);
    }
}
#tree .branch_3_2::before {
    width: 6px;
}
#tree .branch_3_2_1 {
    width: 4px;
    -webkit-animation: shake321 7000ms ease-in-out infinite alternate;
    animation: shake321 7000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake321 {
    0% {
        -webkit-transform: rotateX(-21deg) rotateY(85deg) rotateZ(33deg);
        transform: rotateX(-21deg) rotateY(85deg) rotateZ(33deg);
    }
    100% {
        -webkit-transform: rotateX(-14deg) rotateY(131deg) rotateZ(43deg);
        transform: rotateX(-14deg) rotateY(131deg) rotateZ(43deg);
    }
}
@keyframes shake321 {
    0% {
        -webkit-transform: rotateX(-21deg) rotateY(85deg) rotateZ(33deg);
        transform: rotateX(-21deg) rotateY(85deg) rotateZ(33deg);
    }
    100% {
        -webkit-transform: rotateX(-14deg) rotateY(131deg) rotateZ(43deg);
        transform: rotateX(-14deg) rotateY(131deg) rotateZ(43deg);
    }
}
#tree .branch_3_2_1::before {
    width: 4px;
}
#tree .branch_3_2_1_1 {
    width: 2px;
    -webkit-animation: shake3211 8000ms ease-in-out infinite alternate;
    animation: shake3211 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake3211 {
    0% {
        -webkit-transform: rotateX(47deg) rotateY(597deg) rotateZ(21deg);
        transform: rotateX(47deg) rotateY(597deg) rotateZ(21deg);
    }
    100% {
        -webkit-transform: rotateX(-12deg) rotateY(700deg) rotateZ(3deg);
        transform: rotateX(-12deg) rotateY(700deg) rotateZ(3deg);
    }
}
@keyframes shake3211 {
    0% {
        -webkit-transform: rotateX(47deg) rotateY(597deg) rotateZ(21deg);
        transform: rotateX(47deg) rotateY(597deg) rotateZ(21deg);
    }
    100% {
        -webkit-transform: rotateX(-12deg) rotateY(700deg) rotateZ(3deg);
        transform: rotateX(-12deg) rotateY(700deg) rotateZ(3deg);
    }
}
#tree .branch_3_2_1_1::before {
    width: 2px;
}
#tree .branch_3_2_1_1 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64c564;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_3_2_1_1 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #649964;
}
#tree .branch_3_2_1_2 {
    width: 2px;
    -webkit-animation: shake3212 8000ms ease-in-out infinite alternate;
    animation: shake3212 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake3212 {
    0% {
        -webkit-transform: rotateX(-16deg) rotateY(199deg) rotateZ(-38deg);
        transform: rotateX(-16deg) rotateY(199deg) rotateZ(-38deg);
    }
    100% {
        -webkit-transform: rotateX(-17deg) rotateY(267deg) rotateZ(-22deg);
        transform: rotateX(-17deg) rotateY(267deg) rotateZ(-22deg);
    }
}
@keyframes shake3212 {
    0% {
        -webkit-transform: rotateX(-16deg) rotateY(199deg) rotateZ(-38deg);
        transform: rotateX(-16deg) rotateY(199deg) rotateZ(-38deg);
    }
    100% {
        -webkit-transform: rotateX(-17deg) rotateY(267deg) rotateZ(-22deg);
        transform: rotateX(-17deg) rotateY(267deg) rotateZ(-22deg);
    }
}
#tree .branch_3_2_1_2::before {
    width: 2px;
}
#tree .branch_3_2_1_2 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64b964;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_3_2_1_2 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64cd64;
}
#tree .branch_3_2_1_3 {
    width: 2px;
    -webkit-animation: shake3213 8000ms ease-in-out infinite alternate;
    animation: shake3213 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake3213 {
    0% {
        -webkit-transform: rotateX(22deg) rotateY(49deg) rotateZ(7deg);
        transform: rotateX(22deg) rotateY(49deg) rotateZ(7deg);
    }
    100% {
        -webkit-transform: rotateX(23deg) rotateY(427deg) rotateZ(-38deg);
        transform: rotateX(23deg) rotateY(427deg) rotateZ(-38deg);
    }
}
@keyframes shake3213 {
    0% {
        -webkit-transform: rotateX(22deg) rotateY(49deg) rotateZ(7deg);
        transform: rotateX(22deg) rotateY(49deg) rotateZ(7deg);
    }
    100% {
        -webkit-transform: rotateX(23deg) rotateY(427deg) rotateZ(-38deg);
        transform: rotateX(23deg) rotateY(427deg) rotateZ(-38deg);
    }
}
#tree .branch_3_2_1_3::before {
    width: 2px;
}
#tree .branch_3_2_1_3 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64a864;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_3_2_1_3 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64e364;
}
#tree .branch_3_2_2 {
    width: 4px;
    -webkit-animation: shake322 7000ms ease-in-out infinite alternate;
    animation: shake322 7000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake322 {
    0% {
        -webkit-transform: rotateX(-17deg) rotateY(512deg) rotateZ(50deg);
        transform: rotateX(-17deg) rotateY(512deg) rotateZ(50deg);
    }
    100% {
        -webkit-transform: rotateX(31deg) rotateY(155deg) rotateZ(-29deg);
        transform: rotateX(31deg) rotateY(155deg) rotateZ(-29deg);
    }
}
@keyframes shake322 {
    0% {
        -webkit-transform: rotateX(-17deg) rotateY(512deg) rotateZ(50deg);
        transform: rotateX(-17deg) rotateY(512deg) rotateZ(50deg);
    }
    100% {
        -webkit-transform: rotateX(31deg) rotateY(155deg) rotateZ(-29deg);
        transform: rotateX(31deg) rotateY(155deg) rotateZ(-29deg);
    }
}
#tree .branch_3_2_2::before {
    width: 4px;
}
#tree .branch_3_2_2_1 {
    width: 2px;
    -webkit-animation: shake3221 8000ms ease-in-out infinite alternate;
    animation: shake3221 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake3221 {
    0% {
        -webkit-transform: rotateX(21deg) rotateY(356deg) rotateZ(-10deg);
        transform: rotateX(21deg) rotateY(356deg) rotateZ(-10deg);
    }
    100% {
        -webkit-transform: rotateX(38deg) rotateY(551deg) rotateZ(14deg);
        transform: rotateX(38deg) rotateY(551deg) rotateZ(14deg);
    }
}
@keyframes shake3221 {
    0% {
        -webkit-transform: rotateX(21deg) rotateY(356deg) rotateZ(-10deg);
        transform: rotateX(21deg) rotateY(356deg) rotateZ(-10deg);
    }
    100% {
        -webkit-transform: rotateX(38deg) rotateY(551deg) rotateZ(14deg);
        transform: rotateX(38deg) rotateY(551deg) rotateZ(14deg);
    }
}
#tree .branch_3_2_2_1::before {
    width: 2px;
}
#tree .branch_3_2_2_1 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64a864;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_3_2_2_1 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #649f64;
}
#tree .branch_3_2_2_2 {
    width: 2px;
    -webkit-animation: shake3222 8000ms ease-in-out infinite alternate;
    animation: shake3222 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake3222 {
    0% {
        -webkit-transform: rotateX(-2deg) rotateY(569deg) rotateZ(-33deg);
        transform: rotateX(-2deg) rotateY(569deg) rotateZ(-33deg);
    }
    100% {
        -webkit-transform: rotateX(-51deg) rotateY(44deg) rotateZ(27deg);
        transform: rotateX(-51deg) rotateY(44deg) rotateZ(27deg);
    }
}
@keyframes shake3222 {
    0% {
        -webkit-transform: rotateX(-2deg) rotateY(569deg) rotateZ(-33deg);
        transform: rotateX(-2deg) rotateY(569deg) rotateZ(-33deg);
    }
    100% {
        -webkit-transform: rotateX(-51deg) rotateY(44deg) rotateZ(27deg);
        transform: rotateX(-51deg) rotateY(44deg) rotateZ(27deg);
    }
}
#tree .branch_3_2_2_2::before {
    width: 2px;
}
#tree .branch_3_2_2_2 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64a264;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_3_2_2_2 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64ad64;
}
#tree .branch_3_2_2_3 {
    width: 2px;
    -webkit-animation: shake3223 8000ms ease-in-out infinite alternate;
    animation: shake3223 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake3223 {
    0% {
        -webkit-transform: rotateX(33deg) rotateY(530deg) rotateZ(40deg);
        transform: rotateX(33deg) rotateY(530deg) rotateZ(40deg);
    }
    100% {
        -webkit-transform: rotateX(11deg) rotateY(318deg) rotateZ(10deg);
        transform: rotateX(11deg) rotateY(318deg) rotateZ(10deg);
    }
}
@keyframes shake3223 {
    0% {
        -webkit-transform: rotateX(33deg) rotateY(530deg) rotateZ(40deg);
        transform: rotateX(33deg) rotateY(530deg) rotateZ(40deg);
    }
    100% {
        -webkit-transform: rotateX(11deg) rotateY(318deg) rotateZ(10deg);
        transform: rotateX(11deg) rotateY(318deg) rotateZ(10deg);
    }
}
#tree .branch_3_2_2_3::before {
    width: 2px;
}
#tree .branch_3_2_2_3 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #649f64;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_3_2_2_3 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64c264;
}
#tree .branch_3_2_3 {
    width: 4px;
    -webkit-animation: shake323 7000ms ease-in-out infinite alternate;
    animation: shake323 7000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake323 {
    0% {
        -webkit-transform: rotateX(-49deg) rotateY(401deg) rotateZ(19deg);
        transform: rotateX(-49deg) rotateY(401deg) rotateZ(19deg);
    }
    100% {
        -webkit-transform: rotateX(-38deg) rotateY(708deg) rotateZ(36deg);
        transform: rotateX(-38deg) rotateY(708deg) rotateZ(36deg);
    }
}
@keyframes shake323 {
    0% {
        -webkit-transform: rotateX(-49deg) rotateY(401deg) rotateZ(19deg);
        transform: rotateX(-49deg) rotateY(401deg) rotateZ(19deg);
    }
    100% {
        -webkit-transform: rotateX(-38deg) rotateY(708deg) rotateZ(36deg);
        transform: rotateX(-38deg) rotateY(708deg) rotateZ(36deg);
    }
}
#tree .branch_3_2_3::before {
    width: 4px;
}
#tree .branch_3_2_3_1 {
    width: 2px;
    -webkit-animation: shake3231 8000ms ease-in-out infinite alternate;
    animation: shake3231 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake3231 {
    0% {
        -webkit-transform: rotateX(40deg) rotateY(11deg) rotateZ(0deg);
        transform: rotateX(40deg) rotateY(11deg) rotateZ(0deg);
    }
    100% {
        -webkit-transform: rotateX(14deg) rotateY(380deg) rotateZ(-40deg);
        transform: rotateX(14deg) rotateY(380deg) rotateZ(-40deg);
    }
}
@keyframes shake3231 {
    0% {
        -webkit-transform: rotateX(40deg) rotateY(11deg) rotateZ(0deg);
        transform: rotateX(40deg) rotateY(11deg) rotateZ(0deg);
    }
    100% {
        -webkit-transform: rotateX(14deg) rotateY(380deg) rotateZ(-40deg);
        transform: rotateX(14deg) rotateY(380deg) rotateZ(-40deg);
    }
}
#tree .branch_3_2_3_1::before {
    width: 2px;
}
#tree .branch_3_2_3_1 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64ab64;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_3_2_3_1 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64a464;
}
#tree .branch_3_2_3_2 {
    width: 2px;
    -webkit-animation: shake3232 8000ms ease-in-out infinite alternate;
    animation: shake3232 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake3232 {
    0% {
        -webkit-transform: rotateX(59deg) rotateY(148deg) rotateZ(45deg);
        transform: rotateX(59deg) rotateY(148deg) rotateZ(45deg);
    }
    100% {
        -webkit-transform: rotateX(50deg) rotateY(111deg) rotateZ(24deg);
        transform: rotateX(50deg) rotateY(111deg) rotateZ(24deg);
    }
}
@keyframes shake3232 {
    0% {
        -webkit-transform: rotateX(59deg) rotateY(148deg) rotateZ(45deg);
        transform: rotateX(59deg) rotateY(148deg) rotateZ(45deg);
    }
    100% {
        -webkit-transform: rotateX(50deg) rotateY(111deg) rotateZ(24deg);
        transform: rotateX(50deg) rotateY(111deg) rotateZ(24deg);
    }
}
#tree .branch_3_2_3_2::before {
    width: 2px;
}
#tree .branch_3_2_3_2 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64c664;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_3_2_3_2 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64f864;
}
#tree .branch_3_2_3_3 {
    width: 2px;
    -webkit-animation: shake3233 8000ms ease-in-out infinite alternate;
    animation: shake3233 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake3233 {
    0% {
        -webkit-transform: rotateX(33deg) rotateY(471deg) rotateZ(-30deg);
        transform: rotateX(33deg) rotateY(471deg) rotateZ(-30deg);
    }
    100% {
        -webkit-transform: rotateX(-44deg) rotateY(173deg) rotateZ(-26deg);
        transform: rotateX(-44deg) rotateY(173deg) rotateZ(-26deg);
    }
}
@keyframes shake3233 {
    0% {
        -webkit-transform: rotateX(33deg) rotateY(471deg) rotateZ(-30deg);
        transform: rotateX(33deg) rotateY(471deg) rotateZ(-30deg);
    }
    100% {
        -webkit-transform: rotateX(-44deg) rotateY(173deg) rotateZ(-26deg);
        transform: rotateX(-44deg) rotateY(173deg) rotateZ(-26deg);
    }
}
#tree .branch_3_2_3_3::before {
    width: 2px;
}
#tree .branch_3_2_3_3 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64ba64;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_3_2_3_3 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64ec64;
}
#tree .branch_3_3 {
    width: 6px;
    -webkit-animation: shake33 6000ms ease-in-out infinite alternate;
    animation: shake33 6000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake33 {
    0% {
        -webkit-transform: rotateX(8deg) rotateY(3deg) rotateZ(50deg);
        transform: rotateX(8deg) rotateY(3deg) rotateZ(50deg);
    }
    100% {
        -webkit-transform: rotateX(-32deg) rotateY(95deg) rotateZ(26deg);
        transform: rotateX(-32deg) rotateY(95deg) rotateZ(26deg);
    }
}
@keyframes shake33 {
    0% {
        -webkit-transform: rotateX(8deg) rotateY(3deg) rotateZ(50deg);
        transform: rotateX(8deg) rotateY(3deg) rotateZ(50deg);
    }
    100% {
        -webkit-transform: rotateX(-32deg) rotateY(95deg) rotateZ(26deg);
        transform: rotateX(-32deg) rotateY(95deg) rotateZ(26deg);
    }
}
#tree .branch_3_3::before {
    width: 6px;
}
#tree .branch_3_3_1 {
    width: 4px;
    -webkit-animation: shake331 7000ms ease-in-out infinite alternate;
    animation: shake331 7000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake331 {
    0% {
        -webkit-transform: rotateX(-51deg) rotateY(133deg) rotateZ(-47deg);
        transform: rotateX(-51deg) rotateY(133deg) rotateZ(-47deg);
    }
    100% {
        -webkit-transform: rotateX(-41deg) rotateY(120deg) rotateZ(56deg);
        transform: rotateX(-41deg) rotateY(120deg) rotateZ(56deg);
    }
}
@keyframes shake331 {
    0% {
        -webkit-transform: rotateX(-51deg) rotateY(133deg) rotateZ(-47deg);
        transform: rotateX(-51deg) rotateY(133deg) rotateZ(-47deg);
    }
    100% {
        -webkit-transform: rotateX(-41deg) rotateY(120deg) rotateZ(56deg);
        transform: rotateX(-41deg) rotateY(120deg) rotateZ(56deg);
    }
}
#tree .branch_3_3_1::before {
    width: 4px;
}
#tree .branch_3_3_1_1 {
    width: 2px;
    -webkit-animation: shake3311 8000ms ease-in-out infinite alternate;
    animation: shake3311 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake3311 {
    0% {
        -webkit-transform: rotateX(-25deg) rotateY(279deg) rotateZ(-10deg);
        transform: rotateX(-25deg) rotateY(279deg) rotateZ(-10deg);
    }
    100% {
        -webkit-transform: rotateX(6deg) rotateY(646deg) rotateZ(-31deg);
        transform: rotateX(6deg) rotateY(646deg) rotateZ(-31deg);
    }
}
@keyframes shake3311 {
    0% {
        -webkit-transform: rotateX(-25deg) rotateY(279deg) rotateZ(-10deg);
        transform: rotateX(-25deg) rotateY(279deg) rotateZ(-10deg);
    }
    100% {
        -webkit-transform: rotateX(6deg) rotateY(646deg) rotateZ(-31deg);
        transform: rotateX(6deg) rotateY(646deg) rotateZ(-31deg);
    }
}
#tree .branch_3_3_1_1::before {
    width: 2px;
}
#tree .branch_3_3_1_1 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #649e64;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_3_3_1_1 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64a364;
}
#tree .branch_3_3_1_2 {
    width: 2px;
    -webkit-animation: shake3312 8000ms ease-in-out infinite alternate;
    animation: shake3312 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake3312 {
    0% {
        -webkit-transform: rotateX(-19deg) rotateY(88deg) rotateZ(-4deg);
        transform: rotateX(-19deg) rotateY(88deg) rotateZ(-4deg);
    }
    100% {
        -webkit-transform: rotateX(-16deg) rotateY(422deg) rotateZ(-28deg);
        transform: rotateX(-16deg) rotateY(422deg) rotateZ(-28deg);
    }
}
@keyframes shake3312 {
    0% {
        -webkit-transform: rotateX(-19deg) rotateY(88deg) rotateZ(-4deg);
        transform: rotateX(-19deg) rotateY(88deg) rotateZ(-4deg);
    }
    100% {
        -webkit-transform: rotateX(-16deg) rotateY(422deg) rotateZ(-28deg);
        transform: rotateX(-16deg) rotateY(422deg) rotateZ(-28deg);
    }
}
#tree .branch_3_3_1_2::before {
    width: 2px;
}
#tree .branch_3_3_1_2 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64b864;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_3_3_1_2 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64f464;
}
#tree .branch_3_3_1_3 {
    width: 2px;
    -webkit-animation: shake3313 8000ms ease-in-out infinite alternate;
    animation: shake3313 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake3313 {
    0% {
        -webkit-transform: rotateX(-20deg) rotateY(60deg) rotateZ(10deg);
        transform: rotateX(-20deg) rotateY(60deg) rotateZ(10deg);
    }
    100% {
        -webkit-transform: rotateX(-40deg) rotateY(315deg) rotateZ(-1deg);
        transform: rotateX(-40deg) rotateY(315deg) rotateZ(-1deg);
    }
}
@keyframes shake3313 {
    0% {
        -webkit-transform: rotateX(-20deg) rotateY(60deg) rotateZ(10deg);
        transform: rotateX(-20deg) rotateY(60deg) rotateZ(10deg);
    }
    100% {
        -webkit-transform: rotateX(-40deg) rotateY(315deg) rotateZ(-1deg);
        transform: rotateX(-40deg) rotateY(315deg) rotateZ(-1deg);
    }
}
#tree .branch_3_3_1_3::before {
    width: 2px;
}
#tree .branch_3_3_1_3 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64a864;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_3_3_1_3 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64e764;
}
#tree .branch_3_3_2 {
    width: 4px;
    -webkit-animation: shake332 7000ms ease-in-out infinite alternate;
    animation: shake332 7000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake332 {
    0% {
        -webkit-transform: rotateX(-33deg) rotateY(50deg) rotateZ(25deg);
        transform: rotateX(-33deg) rotateY(50deg) rotateZ(25deg);
    }
    100% {
        -webkit-transform: rotateX(8deg) rotateY(542deg) rotateZ(-43deg);
        transform: rotateX(8deg) rotateY(542deg) rotateZ(-43deg);
    }
}
@keyframes shake332 {
    0% {
        -webkit-transform: rotateX(-33deg) rotateY(50deg) rotateZ(25deg);
        transform: rotateX(-33deg) rotateY(50deg) rotateZ(25deg);
    }
    100% {
        -webkit-transform: rotateX(8deg) rotateY(542deg) rotateZ(-43deg);
        transform: rotateX(8deg) rotateY(542deg) rotateZ(-43deg);
    }
}
#tree .branch_3_3_2::before {
    width: 4px;
}
#tree .branch_3_3_2_1 {
    width: 2px;
    -webkit-animation: shake3321 8000ms ease-in-out infinite alternate;
    animation: shake3321 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake3321 {
    0% {
        -webkit-transform: rotateX(0deg) rotateY(504deg) rotateZ(-57deg);
        transform: rotateX(0deg) rotateY(504deg) rotateZ(-57deg);
    }
    100% {
        -webkit-transform: rotateX(26deg) rotateY(101deg) rotateZ(-11deg);
        transform: rotateX(26deg) rotateY(101deg) rotateZ(-11deg);
    }
}
@keyframes shake3321 {
    0% {
        -webkit-transform: rotateX(0deg) rotateY(504deg) rotateZ(-57deg);
        transform: rotateX(0deg) rotateY(504deg) rotateZ(-57deg);
    }
    100% {
        -webkit-transform: rotateX(26deg) rotateY(101deg) rotateZ(-11deg);
        transform: rotateX(26deg) rotateY(101deg) rotateZ(-11deg);
    }
}
#tree .branch_3_3_2_1::before {
    width: 2px;
}
#tree .branch_3_3_2_1 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64b464;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_3_3_2_1 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64a664;
}
#tree .branch_3_3_2_2 {
    width: 2px;
    -webkit-animation: shake3322 8000ms ease-in-out infinite alternate;
    animation: shake3322 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake3322 {
    0% {
        -webkit-transform: rotateX(16deg) rotateY(569deg) rotateZ(15deg);
        transform: rotateX(16deg) rotateY(569deg) rotateZ(15deg);
    }
    100% {
        -webkit-transform: rotateX(12deg) rotateY(478deg) rotateZ(-44deg);
        transform: rotateX(12deg) rotateY(478deg) rotateZ(-44deg);
    }
}
@keyframes shake3322 {
    0% {
        -webkit-transform: rotateX(16deg) rotateY(569deg) rotateZ(15deg);
        transform: rotateX(16deg) rotateY(569deg) rotateZ(15deg);
    }
    100% {
        -webkit-transform: rotateX(12deg) rotateY(478deg) rotateZ(-44deg);
        transform: rotateX(12deg) rotateY(478deg) rotateZ(-44deg);
    }
}
#tree .branch_3_3_2_2::before {
    width: 2px;
}
#tree .branch_3_3_2_2 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64a364;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_3_3_2_2 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64df64;
}
#tree .branch_3_3_2_3 {
    width: 2px;
    -webkit-animation: shake3323 8000ms ease-in-out infinite alternate;
    animation: shake3323 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake3323 {
    0% {
        -webkit-transform: rotateX(-6deg) rotateY(162deg) rotateZ(5deg);
        transform: rotateX(-6deg) rotateY(162deg) rotateZ(5deg);
    }
    100% {
        -webkit-transform: rotateX(-52deg) rotateY(489deg) rotateZ(5deg);
        transform: rotateX(-52deg) rotateY(489deg) rotateZ(5deg);
    }
}
@keyframes shake3323 {
    0% {
        -webkit-transform: rotateX(-6deg) rotateY(162deg) rotateZ(5deg);
        transform: rotateX(-6deg) rotateY(162deg) rotateZ(5deg);
    }
    100% {
        -webkit-transform: rotateX(-52deg) rotateY(489deg) rotateZ(5deg);
        transform: rotateX(-52deg) rotateY(489deg) rotateZ(5deg);
    }
}
#tree .branch_3_3_2_3::before {
    width: 2px;
}
#tree .branch_3_3_2_3 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64a464;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_3_3_2_3 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64cb64;
}
#tree .branch_3_3_3 {
    width: 4px;
    -webkit-animation: shake333 7000ms ease-in-out infinite alternate;
    animation: shake333 7000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake333 {
    0% {
        -webkit-transform: rotateX(-3deg) rotateY(465deg) rotateZ(20deg);
        transform: rotateX(-3deg) rotateY(465deg) rotateZ(20deg);
    }
    100% {
        -webkit-transform: rotateX(-33deg) rotateY(687deg) rotateZ(-17deg);
        transform: rotateX(-33deg) rotateY(687deg) rotateZ(-17deg);
    }
}
@keyframes shake333 {
    0% {
        -webkit-transform: rotateX(-3deg) rotateY(465deg) rotateZ(20deg);
        transform: rotateX(-3deg) rotateY(465deg) rotateZ(20deg);
    }
    100% {
        -webkit-transform: rotateX(-33deg) rotateY(687deg) rotateZ(-17deg);
        transform: rotateX(-33deg) rotateY(687deg) rotateZ(-17deg);
    }
}
#tree .branch_3_3_3::before {
    width: 4px;
}
#tree .branch_3_3_3_1 {
    width: 2px;
    -webkit-animation: shake3331 8000ms ease-in-out infinite alternate;
    animation: shake3331 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake3331 {
    0% {
        -webkit-transform: rotateX(46deg) rotateY(448deg) rotateZ(54deg);
        transform: rotateX(46deg) rotateY(448deg) rotateZ(54deg);
    }
    100% {
        -webkit-transform: rotateX(-58deg) rotateY(456deg) rotateZ(-21deg);
        transform: rotateX(-58deg) rotateY(456deg) rotateZ(-21deg);
    }
}
@keyframes shake3331 {
    0% {
        -webkit-transform: rotateX(46deg) rotateY(448deg) rotateZ(54deg);
        transform: rotateX(46deg) rotateY(448deg) rotateZ(54deg);
    }
    100% {
        -webkit-transform: rotateX(-58deg) rotateY(456deg) rotateZ(-21deg);
        transform: rotateX(-58deg) rotateY(456deg) rotateZ(-21deg);
    }
}
#tree .branch_3_3_3_1::before {
    width: 2px;
}
#tree .branch_3_3_3_1 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64a864;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_3_3_3_1 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64f464;
}
#tree .branch_3_3_3_2 {
    width: 2px;
    -webkit-animation: shake3332 8000ms ease-in-out infinite alternate;
    animation: shake3332 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake3332 {
    0% {
        -webkit-transform: rotateX(40deg) rotateY(218deg) rotateZ(-27deg);
        transform: rotateX(40deg) rotateY(218deg) rotateZ(-27deg);
    }
    100% {
        -webkit-transform: rotateX(54deg) rotateY(263deg) rotateZ(-16deg);
        transform: rotateX(54deg) rotateY(263deg) rotateZ(-16deg);
    }
}
@keyframes shake3332 {
    0% {
        -webkit-transform: rotateX(40deg) rotateY(218deg) rotateZ(-27deg);
        transform: rotateX(40deg) rotateY(218deg) rotateZ(-27deg);
    }
    100% {
        -webkit-transform: rotateX(54deg) rotateY(263deg) rotateZ(-16deg);
        transform: rotateX(54deg) rotateY(263deg) rotateZ(-16deg);
    }
}
#tree .branch_3_3_3_2::before {
    width: 2px;
}
#tree .branch_3_3_3_2 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64c564;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_3_3_3_2 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64e364;
}
#tree .branch_3_3_3_3 {
    width: 2px;
    -webkit-animation: shake3333 8000ms ease-in-out infinite alternate;
    animation: shake3333 8000ms ease-in-out infinite alternate;
}
@-webkit-keyframes shake3333 {
    0% {
        -webkit-transform: rotateX(-19deg) rotateY(698deg) rotateZ(32deg);
        transform: rotateX(-19deg) rotateY(698deg) rotateZ(32deg);
    }
    100% {
        -webkit-transform: rotateX(-20deg) rotateY(196deg) rotateZ(-43deg);
        transform: rotateX(-20deg) rotateY(196deg) rotateZ(-43deg);
    }
}
@keyframes shake3333 {
    0% {
        -webkit-transform: rotateX(-19deg) rotateY(698deg) rotateZ(32deg);
        transform: rotateX(-19deg) rotateY(698deg) rotateZ(32deg);
    }
    100% {
        -webkit-transform: rotateX(-20deg) rotateY(196deg) rotateZ(-43deg);
        transform: rotateX(-20deg) rotateY(196deg) rotateZ(-43deg);
    }
}
#tree .branch_3_3_3_3::before {
    width: 2px;
}
#tree .branch_3_3_3_3 .leaf {
    position: absolute;
    width: 40px;
    height: 70px;
    left: -20px;
    top: -50px;
    background: #64a064;
    -webkit-clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    clip-path: polygon(0% 100%, 50% -10%, 100% 100%);
    border-radius: 100%;
}
#tree .branch_3_3_3_3 .leaf:nth-child(2) {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    background: #64b564;
}
@-webkit-keyframes cameraHorizontal {
    0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    100% {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }
}
@keyframes cameraHorizontal {
    0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    100% {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }
}

HTML

CSS3 Dancing Tree

css3, tree, move

编辑器支持Emmet

快捷键

CSS3 Dancing Tree

css3, tree, move

纯CSS实现的太空步舞蹈动画

纯CSS实现的机械狗在盒子上跳跃动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：