bounceIn.css

TLDR

This file contains CSS code that defines the animation keyframes and class for the bounceIn effect.

Classes

.bounceIn

The .bounceIn class applies the bounceIn animation effect to an element. It sets the animation duration to 75% of the value specified in the --animate-duration variable and assigns the bounceIn animation keyframes to the animation-name property.

Keyframes

bounceIn

The bounceIn keyframes define the animation for the bounceIn effect. It starts with the element hidden (opacity: 0) and scaled down (transform: scale3d(0.3, 0.3, 0.3)), then gradually increases the scale and opacity until the element is fully visible (opacity: 1) and at its normal size (transform: scale3d(1, 1, 1)). The animation-timing-function property is set to cubic-bezier(0.215, 0.61, 0.355, 1) to give the animation a smooth bouncing effect.

@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  animation-duration: calc(var(--animate-duration) * 0.75);
  animation-name: bounceIn;
}