bounceInLeft.css

TLDR

This file contains CSS code that defines the bounceInLeft animation. The animation is applied to elements with the class name .bounceInLeft and creates a bouncing entrance effect by translating and scaling the element along the x-axis.

Methods

N/A

Classes

bounceInLeft

The .bounceInLeft class is used to apply the bounceInLeft animation to an element. When the animation is applied, the element will appear to bounce in from the left side, starting with a hidden state, then gradually becoming visible while moving and scaling.

@keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0) scaleX(3);
  }

  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0) scaleX(1);
  }

  75% {
    transform: translate3d(-10px, 0, 0) scaleX(0.98);
  }

  90% {
    transform: translate3d(5px, 0, 0) scaleX(0.995);
  }

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

.bounceInLeft {
  animation-name: bounceInLeft;
}