lightSpeedInRight.css

TLDR

The provided file defines a CSS animation called lightSpeedInRight. It also includes a CSS class .lightSpeedInRight that applies the animation to an element.

Classes

.lightSpeedInRight

The .lightSpeedInRight class applies the lightSpeedInRight animation to an element. The animation starts with the element translated 100% to the right and skewed at a -30 degree angle, with 0 opacity. As the animation progresses, the element gradually transitions to a skew of 20 degrees with full opacity at 60% of the animation duration. At 80% of the duration, the element transitions to a skew of -5 degrees. Finally, the element is translated back to its original position at the end of the animation.

@keyframes lightSpeedInRight {
  from {
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    transform: skewX(-5deg);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.lightSpeedInRight {
  animation-name: lightSpeedInRight;
  animation-timing-function: ease-out;
}