bounce.css

TLDR

The provided file, bounce.css, contains CSS code for creating a bouncing animation effect. The animation is defined using a keyframe animation named "bounce". The ".bounce" class is applied to elements to apply the animation effect.

@keyframes bounce

This keyframes rule defines the animation steps for the bouncing effect. It uses different animation-timing-function and transform properties to create the desired animation. The animation starts from its initial state, then bounces up and down at specific intervals, and finally settles back to its original position.

Class bounce

This class applies the "bounce" animation to elements. When this class is added to an element, the defined animation will be applied to it, causing the element to bounce up and down.

@keyframes bounce {
  from,
  20%,
  53%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }

  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }

  80% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }

  90% {
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}

.bounce {
  animation-name: bounce;
  transform-origin: center bottom;
}