main

animate-css/animate.css

Last updated at: 29/12/2023 09:20

zoomInDown.css

TLDR

This file defines a CSS animation called zoomInDown which can be used to zoom in an element from above and slightly bounce it.

Classes

zoomInDown

Applies the zoomInDown animation to the element, causing it to zoom in from above and bounce slightly.

@keyframes zoomInDown {
  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);
  }
}

.zoomInDown {
  animation-name: zoomInDown;
}