flipOutX.css
TLDR
The file flipOutX.css
contains CSS animation keyframes and styles for the flipOutX
animation.
Classes
flipOutX
The flipOutX
class applies the flipOutX
animation to an element. It sets the animation duration to 75% of the --animate-duration
CSS variable. The animation makes use of keyframes defined in the @keyframes flipOutX
rule to rotate and fade out the element.
@keyframes flipOutX {
from {
transform: perspective(400px);
}
30% {
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1;
}
to {
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0;
}
}
.flipOutX {
animation-duration: calc(var(--animate-duration) * 0.75);
animation-name: flipOutX;
backface-visibility: visible !important;
}