#logo {
width: 200px;
z-index: 3;
opacity: 0;
animation: logoFade 0.4s ease forwards;
animation-delay: 0.4s;
}
#leaf-left,
#leaf-right {
position: absolute;
top: 50%;
width: 280px;
opacity: 0.25;
transform: translateY(-50%);
z-index: 2;
}
#leaf-left {
left: -35%;
animation: leafInLeft 0.7s ease-out forwards,
leafOutLeft 0.6s ease-in forwards;
animation-delay: 0s, 1.4s;
}
#leaf-right {
right: -35%;
transform: translateY(-50%) scaleX(-1);
animation: leafInRight 0.7s ease-out forwards,
leafOutRight 0.6s ease-in forwards;
animation-delay: 0s, 1.4s;
}
@keyframes leafInLeft { to { left: -5%; opacity: 0.25; } }
@keyframes leafInRight { to { right: -5%; opacity: 0.25; } }
@keyframes leafOutLeft { to { left: -60%; opacity: 0; } }
@keyframes leafOutRight { to { right: -60%; opacity: 0; } }
@keyframes logoFade { to { opacity: 1; } }
#preloader.hidden {
opacity: 0;
pointer-events: none;
}
@media (max-width: 768px) {
#leaf-left, #leaf-right { width: 180px; }
#logo { width: 150px; }
}
top of page
bottom of page
