backOutDown.css
TLDR
The file backOutDown.css contains CSS code that defines an animation called backOutDown
and a CSS class .backOutDown
that applies that animation to an element.
Classes
.backOutDown
The .backOutDown
class applies the backOutDown
animation to an element. The animation starts with the element at its original state, then scales the element down to 70% of its size and reduces its opacity to 70% at 20% of the animation duration. Finally, the element is translated vertically by 700 pixels and the opacity remains at 70% for the rest of the animation duration.
@keyframes backOutDown {
0% {
transform: scale(1);
opacity: 1;
}
20% {
transform: translateY(0px) scale(0.7);
opacity: 0.7;
}
100% {
transform: translateY(700px) scale(0.7);
opacity: 0.7;
}
}
.backOutDown {
animation-name: backOutDown;
}