slideDown
HTML<div class="slideDown"></div>
CSS@keyframes slide-down {
0% {
transform: translateY(-20px);
}
100% {
transform: translateY(0);
}
}
@keyframes opacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.slideDown {
animation: opacity 1.2s forwards linear, slide-down 0.8s forwards ease-in-out;
}