zoomInUp.css

TLDR

The provided file, zoomInUp.css, contains CSS code for animating a zooming entrance effect. It defines a keyframe animation named zoomInUp and a corresponding CSS class .zoomInUp to apply the animation.

Methods

None

Classes

zoomInUp

The zoomInUp class applies the zoomInUp animation to an element. This animation animates the element to zoom in and move upwards. The animation consists of two keyframes, the first starting from an initial state with no opacity and a scaled-down size, and the second keyframe at 60% duration of the animation with full opacity and a larger size, resulting in a zoomed-in and moved up appearance.

@keyframes zoomInUp {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInUp {
  animation-name: zoomInUp;
}