backOutRight.css
TLDR
This CSS file defines an animation called backOutRight
and a class called .backOutRight
.
Classes
backOutRight
This class applies the backOutRight
animation to the element. The animation starts with the element at normal size and full opacity (scale(1)
and opacity: 1
). Then, over the course of 20% of the animation duration, the element scales down to 70% of its original size and its opacity decreases to 0.7. Finally, over the remaining 80%, the element continues moving to the right by 2000 pixels while maintaining the size and opacity from the previous step.
@keyframes backOutRight {
0% {
transform: scale(1);
opacity: 1;
}
20% {
transform: translateX(0px) scale(0.7);
opacity: 0.7;
}
100% {
transform: translateX(2000px) scale(0.7);
opacity: 0.7;
}
}
.backOutRight {
animation-name: backOutRight;
}