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;
}