flipInY.css

TLDR

The file flipInY.css contains CSS code for defining a keyframe animation called flipInY. It also contains a CSS class called .flipInY which applies the animation to an element.

Classes

.flipInY

This class applies the flipInY keyframe animation to an element. It sets the backface-visibility property to visible, overrides the !important rule for backface-visibility and sets animation-name to flipInY.

Methods

@keyframes flipInY {
  from {
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    animation-timing-function: ease-in;
  }

  60% {
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    transform: perspective(400px);
  }
}

.flipInY {
  backface-visibility: visible !important;
  animation-name: flipInY;
}