LEARN

Tailwind CSS Animation

Tailwind CSS animation utilities enable you to add dynamic motion and interactivity to elements on your website or web application. Animation can enhance user experience, provide visual feedback, and make your site more engaging.

Add tailwind animation into your website with pagedone customizable classes. You have to follow few steps to add classes in your 'input.css' file where you define your project's customized styles.

  • Add below styles in 'input.css' file in your project or if you are using tailwind CDN than, add below style into your 'css' object inside style
  • Use customized amimation classes shown below.

@import "tailwindcss";

@theme {
  --animate-fade-in: fade-in 0.3s ease forwards;
  --animate-fade-out: fade-out 0.3s ease forwards;
  --animate-fade-in-down: fade-in-down 0.3s ease forwards;
  --animate-fade-in-up: fade-in-up 0.3s ease forwards;
  --animate-fade-in-left: fade-in-left 0.3s ease forwards;
  --animate-fade-in-right: fade-in-right 0.3s ease forwards;
  --animate-fade-in-top-left: fade-in-top-left 0.3s ease forwards;
  --animate-fade-in-top-right: fade-in-top-right 0.3s ease forwards;
  --animate-fade-in-bottom-left: fade-in-bottom-left 0.3s ease forwards;
  --animate-fade-in-bottom-right: fade-in-bottom-right 0.3s ease forwards;
  --animate-fade-in-bounce-right: fade-in-bounce-right 0.5s ease forwards;
  --animate-fade-in-bounce-left: fade-in-bounce-left 0.5s ease forwards;
  --animate-fade-in-bouncedown: fade-in-bouncedown 0.5s ease forwards;
  --animate-fade-in-bounceup: fade-in-bounceup 0.5s ease forwards;
  --animate-fade-out-down: fade-out-down 0.3s ease forwards;
  --animate-fade-out-up: fade-out-up 0.3s ease forwards;
  --animate-fade-out-left: fade-out-left 0.3s ease forwards;
  --animate-fade-out-right: fade-out-right 0.3s ease forwards;
  --animate-fade-out-top-left: fade-out-top-left 0.3s ease forwards;
  --animate-fade-out-top-right: fade-out-top-right 0.3s ease forwards;

  --animate-slide-in-down: slide-in-down 0.3s ease forwards;
  --animate-slide-in-up: slide-in-up 0.3s ease forwards;
  --animate-slide-in-left: slide-in-left 0.3s ease forwards;
  --animate-slide-in-right: slide-in-right 0.3s ease forwards;
  --animate-slide-out-down: slide-out-down 0.3s ease forwards;
  --animate-slide-out-up: slide-out-up 0.3s ease forwards;
  --animate-slide-out-left: slide-out-left 0.3s ease forwards;
  --animate-slide-out-right: slide-out-right 0.3s ease forwards;
  --animate-slide-down: slide-down 0.3s ease forwards;
  --animate-slide-up: slide-up 0.3s ease forwards;
  --animate-slide-left: slide-left 0.3s ease forwards;
  --animate-slide-right: slide-right 0.3s ease forwards;

  --animate-fly-in: fly-in 0.5s ease forwards;
  --animate-fly-in-up: fly-in-up 0.5s ease forwards;
  --animate-fly-in-down: fly-in-down 0.5s ease forwards;
  --animate-fly-in-left: fly-in-left 0.5s ease forwards;
  --animate-fly-in-right: fly-in-right 0.5s ease forwards;
  --animate-fly-out: fly-out 0.5s ease forwards;
  --animate-fly-out-up: fly-out-up 0.5s ease forwards;
  --animate-fly-out-down: fly-out-down 0.5s ease forwards;
  --animate-fly-out-left: fly-out-left 0.5s ease forwards;
  --animate-fly-out-right: fly-out-right 0.5s ease forwards;

  --animate-zoom-in: zoom-in 0.3s ease forwards;
  --animate-zoom-in-up: zoom-in-up 0.3s ease forwards;
  --animate-zoom-in-down: zoom-in-down 0.3s ease forwards;
  --animate-zoom-in-left: zoom-in-left 0.3s ease forwards;
  --animate-zoom-in-right: zoom-in-right 0.3s ease forwards;
  --animate-zoom-in-top-left: zoom-in-top-left 0.3s ease forwards;
  --animate-zoom-in-top-right: zoom-in-top-right 0.3s ease forwards;
  --animate-zoom-in-bottom-left: zoom-in-bottom-left 0.3s ease forwards;
  --animate-zoom-in-bottom-right: zoom-in-bottom-right 0.3s ease forwards;
  --animate-zoom-out: zoom-out 0.3s ease forwards;
  --animate-zoom-out-up: zoom-out-up 0.3s ease forwards;
  --animate-zoom-out-down: zoom-out-down 0.3s ease forwards;
  --animate-zoom-out-left: zoom-out-left 0.3s ease forwards;
  --animate-zoom-out-right: zoom-out-right 0.3s ease forwards;

  --animate-flip: flip 0.4s ease forwards;
  --animate-flip-up: flip-up 0.4s ease forwards;
  --animate-flip-down: flip-down 0.4s ease forwards;
  --animate-flip-left: flip-left 0.4s ease forwards;
  --animate-flip-right: flip-right 0.4s ease forwards;
  --animate-flip-top-left: flip-top-left 0.4s ease forwards;
  --animate-flip-top-right: flip-top-right 0.4s ease forwards;
  --animate-flip-bottom-left: flip-bottom-left 0.4s ease forwards;
  --animate-flip-bottom-right: flip-bottom-right 0.4s ease forwards;

  --animate-flipy: flipy 0.4s ease forwards;
  --animate-flipy-up: flipy-up 0.4s ease forwards;
  --animate-flipy-down: flipy-down 0.4s ease forwards;
  --animate-flipy-left: flipy-left 0.4s ease forwards;
  --animate-flipy-right: flipy-right 0.4s ease forwards;
  --animate-flipy-top-left: flipy-top-left 0.4s ease forwards;
  --animate-flipy-top-right: flipy-top-right 0.4s ease forwards;
  --animate-flipy-bottom-left: flipy-bottom-left 0.4s ease forwards;
  --animate-flipy-bottom-right: flipy-bottom-right 0.4s ease forwards;

  --animate-browse-in: browse-in 0.4s ease forwards;
  --animate-browse-out: browse-out 0.4s ease forwards;
  --animate-browse-out-left: browse-out-left 0.4s ease forwards;
  --animate-browse-out-right: browse-out-right 0.4s ease forwards;

  --animate-tada: tada 0.8s ease forwards;
  --animate-jiggle: jiggle 0.6s ease forwards;
  --animate-shake: shake 0.6s ease forwards;
  --animate-flash: flash 0.6s ease forwards;
  --animate-wiggle: wiggle 0.6s ease forwards;
  --animate-glow: glow 0.8s ease forwards;
  --animate-bounce: bounce 0.5s ease forwards;
  --animate-round: round 0.8s ease forwards;
  --animate-drop-in: drop-in 0.4s ease forwards;
  --animate-drop-out: drop-out 0.4s ease forwards;
  --animate-fly-in-anim: fly-in 0.5s ease forwards;
  --animate-spinner-grow: spinner-grow 0.75s linear infinite;
  --animate-placeholder-wave: placeholder-wave 2s linear infinite;
  --animate-show-up-clock: show-up-clock 0.3s ease forwards;
  --animate-count-in: count-in 0.4s ease forwards;
  --animate-progress: progress 1s ease forwards;
}

@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fade-out {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes fade-in-down {
  0% { opacity: 0; transform: translate3d(0, -100%, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fade-in-up {
  0% { opacity: 0; transform: translate3d(0, 100%, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fade-in-left {
  0% { opacity: 0; transform: translate3d(-100%, 0, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fade-in-right {
  0% { opacity: 0; transform: translate3d(100%, 0, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fade-in-top-left {
  0% { opacity: 0; transform: translate3d(-100%, -100%, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fade-in-top-right {
  0% { opacity: 0; transform: translate3d(100%, -100%, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fade-in-bottom-left {
  0% { opacity: 0; transform: translate3d(100%, 100%, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fade-in-bottom-right {
  0% { opacity: 0; transform: translate3d(-100%, 100%, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fade-in-bounce-right {
  0% { opacity: 0; transform: translate3d(100%, 0, 0); }
  33% { opacity: 0.5; transform: translate3d(0, 0, 0); }
  66% { opacity: 0.7; transform: translate3d(20%, 0, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fade-in-bounce-left {
  0% { opacity: 0; transform: translate3d(-100%, 0, 0); }
  33% { opacity: 0.5; transform: translate3d(0, 0, 0); }
  66% { opacity: 0.7; transform: translate3d(-20%, 0, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fade-in-bouncedown {
  0% { opacity: 0; transform: translate3d(0, -100%, 0); }
  33% { opacity: 0.5; transform: translate3d(0, 0, 0); }
  66% { opacity: 0.7; transform: translate3d(0, -20%, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fade-in-bounceup {
  0% { opacity: 0; transform: translate3d(0, 100%, 0); }
  33% { opacity: 0.5; transform: translate3d(0, 0, 0); }
  66% { opacity: 0.7; transform: translate3d(0, 20%, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fade-out-down {
  0% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(0, 100%, 0); }
}
@keyframes fade-out-up {
  0% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(0, -100%, 0); }
}
@keyframes fade-out-left {
  0% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(-100%, 0, 0); }
}
@keyframes fade-out-right {
  0% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(100%, 0, 0); }
}
@keyframes fade-out-top-left {
  100% { opacity: 0; transform: translate3d(-100%, -100%, 0); }
}
@keyframes fade-out-top-right {
  100% { opacity: 0; transform: translate3d(100%, -100%, 0); }
}
@keyframes slide-in-down {
  0% { visibility: visible; transform: translate3d(0, -100%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes slide-in-up {
  0% { visibility: visible; transform: translate3d(0, 100%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes slide-in-left {
  0% { visibility: visible; transform: translate3d(-100%, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes slide-in-right {
  0% { visibility: visible; transform: translate3d(100%, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes slide-out-down {
  0% { transform: translate3d(0, 0, 0); }
  100% { visibility: hidden; transform: translate3d(0, 100%, 0); }
}
@keyframes slide-out-up {
  0% { transform: translate3d(0, 0, 0); }
  100% { visibility: hidden; transform: translate3d(0, -100%, 0); }
}
@keyframes slide-out-left {
  0% { transform: translate3d(0, 0, 0); }
  100% { visibility: hidden; transform: translate3d(-100%, 0, 0); }
}
@keyframes slide-out-right {
  0% { transform: translate3d(0, 0, 0); }
  100% { visibility: hidden; transform: translate3d(100%, 0, 0); }
}
@keyframes slide-down {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(0, 100%, 0); }
}
@keyframes slide-up {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(0, -100%, 0); }
}
@keyframes slide-left {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-100%, 0, 0); }
}
@keyframes slide-right {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(100%, 0, 0); }
}
@keyframes fly-in {
  0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  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); }
  100% { opacity: 1; transform: scale3d(1, 1, 1); }
}
@keyframes fly-in-up {
  0% { opacity: 0; transform: translate3d(0, 1500px, 0); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  60% { opacity: 1; transform: translate3d(0, -20px, 0); }
  75% { transform: translate3d(0, 10px, 0); }
  90% { transform: translate3d(0, -5px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes fly-in-down {
  0% { opacity: 0; transform: translate3d(0, -1500px, 0); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  60% { opacity: 1; transform: translate3d(0, 25px, 0); }
  75% { transform: translate3d(0, -10px, 0); }
  90% { transform: translate3d(0, 5px, 0); }
  100% { transform: none; }
}
@keyframes fly-in-left {
  0% { opacity: 0; transform: translate3d(1500px, 0, 0); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  60% { opacity: 1; transform: translate3d(-25px, 0, 0); }
  75% { transform: translate3d(10px, 0, 0); }
  90% { transform: translate3d(-5px, 0, 0); }
  100% { transform: none; }
}
@keyframes fly-in-right {
  0% { opacity: 0; transform: translate3d(-1500px, 0, 0); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  60% { opacity: 1; transform: translate3d(25px, 0, 0); }
  75% { transform: translate3d(-10px, 0, 0); }
  90% { transform: translate3d(5px, 0, 0); }
  100% { transform: none; }
}
@keyframes fly-out {
  0% { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  20% { transform: scale3d(0.9, 0.9, 0.9); }
  50%, 55% { opacity: 1; transform: scale3d(1.1, 1.1, 1.1); }
  100% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
}
@keyframes fly-out-up {
  0% { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  20% { transform: translate3d(0, 10px, 0); }
  40%, 45% { opacity: 1; transform: translate3d(0, -20px, 0); }
  100% { opacity: 0; transform: translate3d(0, 2000px, 0); }
}
@keyframes fly-out-down {
  0% { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  20% { transform: translate3d(0, -10px, 0); }
  40%, 45% { opacity: 1; transform: translate3d(0, 20px, 0); }
  100% { opacity: 0; transform: translate3d(0, -2000px, 0); }
}
@keyframes fly-out-left {
  0% { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  20% { opacity: 1; transform: translate3d(-20px, 0, 0); }
  100% { opacity: 0; transform: translate3d(2000px, 0, 0); }
}
@keyframes fly-out-right {
  0% { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  20% { opacity: 1; transform: translate3d(20px, 0, 0); }
  100% { opacity: 0; transform: translate3d(-2000px, 0, 0); }
}
@keyframes zoom-in {
  0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
  80% { opacity: 0.8; transform: scale3d(1.1, 1.1, 1.1); }
  100% { opacity: 1; }
}
@keyframes zoom-in-up {
  0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3) translate3d(0, 100%, 0); }
  80% { opacity: 0.8; transform: scale3d(1.1, 1.1, 1.1); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes zoom-in-down {
  0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3) translate3d(0, -100%, 0); }
  80% { opacity: 0.8; transform: scale3d(1.1, 1.1, 1.1); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes zoom-in-right {
  0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3) translate3d(-100%, 0, 0); }
  80% { opacity: 0.8; transform: scale3d(1.1, 1.1, 1.1); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes zoom-in-left {
  0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3) translate3d(100%, 0, 0); }
  80% { opacity: 0.8; transform: scale3d(1.1, 1.1, 1.1); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes zoom-in-top-left {
  0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3) translate3d(-100%, -100%, 0); }
  80% { opacity: 0.8; transform: scale3d(1.1, 1.1, 1.1); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes zoom-in-top-right {
  0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3) translate3d(100%, -100%, 0); }
  80% { opacity: 0.8; transform: scale3d(1.1, 1.1, 1.1); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes zoom-in-bottom-left {
  0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3) translate3d(-100%, 100%, 0); }
  80% { opacity: 0.8; transform: scale3d(1.1, 1.1, 1.1); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes zoom-in-bottom-right {
  0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3) translate3d(100%, 100%, 0); }
  80% { opacity: 0.8; transform: scale3d(1.1, 1.1, 1.1); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes zoom-out {
  0% { opacity: 1; }
  15% { opacity: 0.8; transform: scale3d(1.1, 1.1, 1.1); }
  100% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
}
@keyframes zoom-out-up {
  0% { opacity: 1; transform: translate3d(0, 0, 0); }
  15% { opacity: 0.8; transform: scale3d(1.1, 1.1, 1.1); }
  100% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3) translate3d(0, -100%, 0); }
}
@keyframes zoom-out-down {
  0% { opacity: 1; transform: translate3d(0, 0, 0); }
  15% { opacity: 0.8; transform: scale3d(1.1, 1.1, 1.1); }
  100% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3) translate3d(0, 100%, 0); }
}
@keyframes zoom-out-left {
  0% { opacity: 1; transform: translate3d(0, 0, 0); }
  15% { opacity: 0.8; transform: scale3d(1.1, 1.1, 1.1); }
  100% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3) translate3d(-100%, 0, 0); }
}
@keyframes zoom-out-right {
  0% { opacity: 1; transform: translate3d(0, 0, 0); }
  15% { opacity: 0.8; transform: scale3d(1.1, 1.1, 1.1); }
  100% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3) translate3d(100%, 0, 0); }
}
@keyframes flip {
  0% { transform: rotateY(-90deg); }
  50% { transform: rotateY(-45deg); }
  100% { transform: rotateY(0deg); }
}
@keyframes flip-up {
  0% { transform: translate3d(0, 100%, 0) rotateY(-180deg); }
  50% { transform: rotateY(-90deg); }
  100% { transform: translate3d(0, 0, 0) rotateY(0deg); }
}
@keyframes flip-down {
  0% { transform: translate3d(0, -100%, 0) rotateY(-180deg); }
  50% { transform: rotateY(-90deg); }
  100% { transform: translate3d(0, 0, 0) rotateY(0deg); }
}
@keyframes flip-left {
  0% { transform: translate3d(-100%, 0, 0) rotateY(-180deg); }
  50% { transform: rotateY(-90deg); }
  100% { transform: translate3d(0, 0, 0) rotateY(0deg); }
}
@keyframes flip-right {
  0% { transform: translate3d(100%, 0, 0) rotateY(-180deg); }
  50% { transform: rotateY(-90deg); }
  100% { transform: translate3d(0, 0, 0) rotateY(0deg); }
}
@keyframes flip-top-left {
  0% { transform: translate3d(-100%, -100%, 0) rotateY(-180deg); }
  50% { transform: rotateY(-90deg); }
  100% { transform: translate3d(0, 0, 0) rotateY(0deg); }
}
@keyframes flip-top-right {
  0% { transform: translate3d(100%, -100%, 0) rotateY(-180deg); }
  50% { transform: rotateY(-90deg); }
  100% { transform: translate3d(0, 0, 0) rotateY(0deg); }
}
@keyframes flip-bottom-left {
  0% { transform: translate3d(-100%, 100%, 0) rotateY(-180deg); }
  50% { transform: rotateY(-90deg); }
  100% { transform: translate3d(0, 0, 0) rotateY(0deg); }
}
@keyframes flip-bottom-right {
  0% { transform: translate3d(100%, 100%, 0) rotateY(-180deg); }
  50% { transform: rotateY(-90deg); }
  100% { transform: translate3d(0, 0, 0) rotateY(0deg); }
}
@keyframes flipy {
  0% { transform: rotateX(-180deg); }
  50% { transform: rotateX(-90deg); }
  100% { transform: rotateX(0deg); }
}
@keyframes flipy-up {
  0% { transform: translate3d(0, 100%, 0) rotateX(-180deg); }
  50% { transform: rotateX(-90deg); }
  100% { transform: translate3d(0, 0, 0) rotateX(0deg); }
}
@keyframes flipy-down {
  0% { transform: translate3d(0, -100%, 0) rotateX(-180deg); }
  50% { transform: rotateX(-90deg); }
  100% { transform: translate3d(0, 0, 0) rotateX(0deg); }
}
@keyframes flipy-left {
  0% { transform: translate3d(-100%, 0, 0) rotateX(-180deg); }
  50% { transform: rotateX(-90deg); }
  100% { transform: translate3d(0, 0, 0) rotateX(0deg); }
}
@keyframes flipy-right {
  0% { transform: translate3d(100%, 0, 0) rotateX(-180deg); }
  50% { transform: rotateX(-90deg); }
  100% { transform: translate3d(0, 0, 0) rotateX(0deg); }
}
@keyframes flipy-top-left {
  0% { transform: translate3d(-100%, -100%, 0) rotateX(-180deg); }
  50% { transform: rotateX(-90deg); }
  100% { transform: translate3d(0, 0, 0) rotateX(0deg); }
}
@keyframes flipy-top-right {
  0% { transform: translate3d(100%, -100%, 0) rotateX(-180deg); }
  50% { transform: rotateX(-90deg); }
  100% { transform: translate3d(0, 0, 0) rotateX(0deg); }
}
@keyframes flipy-bottom-left {
  0% { transform: translate3d(-100%, 100%, 0) rotateX(-180deg); }
  50% { transform: rotateX(-90deg); }
  100% { transform: translate3d(0, 0, 0) rotateX(0deg); }
}
@keyframes flipy-bottom-right {
  0% { transform: translate3d(100%, 100%, 0) rotateX(-180deg); }
  50% { transform: rotateX(-90deg); }
  100% { transform: translate3d(0, 0, 0) rotateX(0deg); }
}
@keyframes browse-in {
  0% { transform: scale(0.8) translateZ(0); z-index: -1; }
  10% { transform: scale(0.8) translateZ(0); z-index: -1; opacity: 0.7; }
  80% { transform: scale(1.05) translateZ(0); z-index: 999; opacity: 1; }
  100% { transform: scale(1) translateZ(0); z-index: 999; }
}
@keyframes browse-out {
  0% { transform: translateX(0) rotateY(0) rotateX(0); z-index: 999; }
  50% { transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); z-index: -1; }
  80% { opacity: 1; }
  100% { opacity: 0; z-index: -1; transform: translateX(0) rotateY(0) rotateX(0) translateZ(-10px); }
}
@keyframes browse-out-left {
  0% { transform: translateX(0) rotateY(0) rotateX(0); z-index: 999; }
  50% { transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); z-index: -1; }
  80% { opacity: 1; }
  100% { opacity: 0; z-index: -1; transform: translateX(0) rotateY(0) rotateX(0) translateZ(-10px); }
}
@keyframes browse-out-right {
  0% { transform: translateX(0) rotateY(0) rotateX(0); z-index: 999; }
  50% { transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); z-index: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; z-index: 1; transform: translateX(0) rotateY(0) rotateX(0) translateZ(-10px); }
}
@keyframes tada {
  0% { transform: scale3d(1, 1, 1); }
  10%, 20% { transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
  30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
  40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
  100% { transform: scale3d(1, 1, 1); }
}
@keyframes jiggle {
  0% { transform: scale3d(1, 1, 1); }
  30% { transform: scale3d(1.25, 0.75, 1); }
  40% { transform: scale3d(0.75, 1.25, 1); }
  50% { transform: scale3d(1.15, 0.85, 1); }
  65% { transform: scale3d(0.95, 1.05, 1); }
  75% { transform: scale3d(1.05, 0.95, 1); }
  100% { transform: scale3d(1, 1, 1); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
  20%, 40%, 60%, 80% { transform: translateX(10px); }
}
@keyframes flash {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}
@keyframes wiggle {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(5deg); }
  40% { transform: rotate(-5deg); }
  60% { transform: rotate(5deg); }
  80% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}
@keyframes glow {
  0% { background-color: #fcfcfd; }
  30% { background-color: #fff6cd; }
  100% { background-color: #fcfcfd; }
}
@keyframes bounce {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, 25%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes round {
  0% { transform: scale3d(1.1, 1.1, 1.1) rotateY(-180deg); }
  40% { transform: scale3d(1.1, 1.1, 1.1) rotateY(160deg); }
  50% { transform: scale3d(1.1, 1.1, 1.1) rotateY(180deg); }
  80% { transform: scale3d(1.1, 1.1, 1.1) rotateY(340deg); }
  100% { transform: scale3d(1, 1, 1) rotateY(360deg); }
}
@keyframes drop-in {
  0% { opacity: 0; transform: scale(0); animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes drop-out {
  0% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1); }
  100% { opacity: 0; transform: scale(0); }
}
@keyframes spinner-grow {
  0% { transform: scale(0); }
  100% { transform: none; opacity: 1; }
}
@keyframes placeholder-wave {
  100% { mask-position: -200% 0%; }
}
@keyframes show-up-clock {
  0% { opacity: 0; transform: scale(0.7); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes count-in {
  0% { opacity: 0; transform: translate3d(0, -80%, 0); }
  50% { opacity: 1; transform: translate3d(0, 0, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes progress {
  0% { transform: scale3d(0, 1, 1); width: 0; }
  60% { transform: scale3d(1, 1, 1); width: 90%; }
  100% { transform: scale3d(1, 1, 1); width: 100%; }
}

Custom Tailwind Animations

Below are list of all customized animations with their class names.

Animation Name
Class Name
fadeIn animate-fadeIn
fadeInDown animate-fadeInDown
fadeInLeft animate-fadeInLeft
fadeInRight animate-fadeInRight
fadeInUp animate-fadeInUp
fadeOut animate-fadeOut
fadeOutDown animate-fadeOutDown
fadeOutLeft animate-fadeOutLeft
fadeOutRight animate-fadeOutRight
fadeOutUp animate-fadeOutUp
slideInDown animate-slideInDown
slideInLeft animate-slideInLeft
slideInRight animate-slideInRight
slideInUp animate-slideInUp
slideOutDown animate-slideOutDown
slideOutLeft animate-slideOutLeft
slideOutRight animate-slideOutRight
slideOutUp animate-slideOutUp
slideDown animate-slideDown
slideLeft animate-slideLeft
slideRight animate-slideRight
slideUp animate-slideUp
ZoomIn animate-zoomIn
ZoomOut animate-zoomOut
Tada animate-tada
SpinnerGrow animate-spinnerGrow
fadeInTopLeft animate-fadeInTopLeft
fadeInTopRight animate-fadeInTopRight
fadeInBottomLeft animate-fadeInBottomLeft
fadeInBottomRight animate-fadeInBottomRight
fadeInBounceDown animate-fadeInBounceDown
fadeInBounceUp animate-fadeInBounceUp
fadeInBounceRight animate-fadeInBounceRight
fadeInBounceLeft animate-fadeInBounceLeft
fadeOutLeft animate-fadeOutLeft
fadeOutTopLeft animate-fadeOutTopLeft
fadeOutTopRight animate-fadeOutTopRight
dropIn animate-dropIn
dropOut animate-dropOut
flyIn animate-flyIn
flyInUp animate-flyInUp
flyInDown animate-flyInDown
flyInLeft animate-flyInLeft
flyInRight animate-flyInRight
flyOut animate-flyOut
flyOutUp animate-flyOutUp
flyOutDown animate-flyOutDown
flyOutLeft animate-flyOutLeft
flyOutRight animate-flyOutRight
browseIn animate-browseInt
browseOut animate-browseOut
browseOutLeft animate-browseOutLeft
browseOutRight animate-browseOutRight
jiggle animate-jiggle
flash animate-flash
Shake animate-shake
Glow animate-glow
wiggle animate-wiggle
flip animate-flip
flipy animate-flipy
flipUp animate-flipUp
flipDown animate-flipDown
flipLeft animate-flipLeft
flipTopLeft animate-flipTopLeft
flipTopRight animate-flipTopRight
flipBottomLeft animate-flipBottomLeft
flipBottomRight animate-flipBottomRight
flipyUp animate-flipyUp
flipyDown animate-flipyDown
flipyLeft animate-flipyLeft
flipyRight animate-flipyRight
flipyTopLeft animate-flipyTopLeft
flipybottomLeft animate-flipybottomLeft
flipyTopRight animate-flipyTopRight
flipyBottomRight animate-flipyBottomRight
zoomInUP animate-zoomInUp
zoomInDown animate-zoomInDown
zoomInRight animate-zoomInRight
zoomInLeft animate-zoomInLeft
zoomInBottomRight animate-zoomInBottomRight
zoomInTopRight animate-zoomInTopRight
zoomInTopLeft animate-zoomInTopLeft
zoomInBottomLeft animate-zoomInBottomLeft
zoomOutDown animate-zoomOutDown
zoomOutUp animate-zoomOutUp
zoomOutLeft animate-zoomOutLeft
zoomOutRight animate-zoomOutRight

Fade in/Out Animation Examples

Use Below examples of animations in tailwind css to animate html elements.

fadeIn
fadeInDown
fadeInLeft
fadeInRight
fadeInUp
fadeOut
fadeOutDown
fadeOutLeft
fadeOutRight
fadeOutUp
fadeIn
TopLeft
fadeIn
TopRight
fadeIn
BottomLeft
fadeIn
BottomRight
fadeIn
BounceDown
fadeIn
BounceUp
fadeIn
BounceRight
fadeIn
BounceLeft
fadeOutLeft
fadeOut
TopLeft
fadeOut
TopRight
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-fadeIn">fadeIn</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-fadeInDown">fadeInDown</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-fadeInLeft">fadeInLeft</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-fadeInRight">fadeInRight</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-fadeInUp">fadeInUp</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-fadeOut">fadeOut</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-fadeOutDown">fadeOutDown</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-fadeOutLeft">fadeOutLeft</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-fadeOutRight">fadeOutRight</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-fadeOutUp">fadeOutUp</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center text-center hover:animate-fadeInTopLeft">fadeIn <br>TopLeft </div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center text-center hover:animate-fadeInTopRight">fadeIn <br>TopRight </div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center text-center hover:animate-fadeInBottomLeft">fadeIn <br>BottomLeft </div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center text-center hover:animate-fadeInBottomRight">fadeIn <br>BottomRight </div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center text-center hover:animate-fadeInBounceDown">fadeIn <br>BounceDown </div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center text-center hover:animate-fadeInBounceUp">fadeIn <br>BounceUp </div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center text-center hover:animate-fadeInBounceRight">fadeIn <br>BounceRight </div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center text-center hover:animate-fadeInBounceLeft">fadeIn <br>BounceLeft </div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-fadeOutLeft">fadeOutLeft</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center text-center hover:animate-fadeOutTopLeft">fadeOut <br>TopLeft </div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center text-center hover:animate-fadeOutTopRight">fadeOut <br>TopRight </div>

rendom Animation Examples

Use Below examples of animations in tailwind css to animate html elements.

dropIn
dropOut
Tada
jiggle
flash
SpinnerGrow
Shake
Glow
wiggle
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-tada">Tada</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-spinnerGrow">SpinnerGrow</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-dropIn">dropIn</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-dropOut">dropOut</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-jiggle">jiggle</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flash">flash</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-shake">Shake</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-glow">Glow</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-wiggle">wiggle</div>

Slide in/Out Animation Examples

Use Below examples of animations in tailwind css to animate html elements.

slideInDown
slideInLeft
slideInRight
slideInUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp
slideDown
slideLeft
slideRight
slideUp
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-slideInDown">slideInDown</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-slideInLeft">slideInLeft</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-slideInRight">slideInRight</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-slideInUp">slideInUp</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-slideOutDown">slideOutDown</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-slideOutLeft">slideOutLeft</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-slideOutRight">slideOutRight</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-slideOutUp">slideOutUp</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-slideDown">slideDown</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-slideLeft">slideLeft</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-slideRight">slideRight</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-slideUp">slideUp</div>

Browse in/Out Animation Examples

Use Below examples of animations in tailwind css to animate html elements.

browseIn
browseOut
browse
OutLeft
browse
OutRight
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-browseIn">browseIn</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-browseOut">browseOut</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center text-center hover:animate-browseOutLeft">browse <br>OutLeft </div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center text-center hover:animate-browseOutRight">browse <br>OutRight </div>

Fly in/Out Animation Examples

Use Below examples of animations in tailwind css to animate html elements.

flyIn
flyInUp
flyInDown
flyInLeft
flyInRight
flyOut
flyOutUp
flyOutDown
flyOutLeft
flyOutRight
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flyIn">flyIn</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flyInUp">flyInUp</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flyInDown">flyInDown</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flyInLeft">flyInLeft</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flyInRight">flyInRight</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flyOut">flyOut</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flyOutUp">flyOutUp</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flyOutDown">flyOutDown</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flyOutLeft">flyOutLeft</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flyOutRight">flyOutRight</div>

Horizontal Flip Animation Examples

Use Below examples of animations in tailwind css to animate html elements.

flip
flipup
flipDown
flipLeft
flipRight
flip
TopLeft
flip
TopRight
flip
BottomLeft
flip
BottomRight 
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flip">flip</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flipUp">flipUp</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flipDown">flipDown</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flipLeft">flipLeft</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flipRight">flipRight</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flipTopLeft">flipTopLeft</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flipTopRight">flipTopRight</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flipBottomLeft">flipBottomLeft</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flipBottomRight">flipBottomRight</div>

Vertical Flip Animation Examples

Use Below examples of animations in tailwind css to animate html elements.

flipy
flipyup
flipyDown
flipyLeft
flipyRight
flipy
TopLeft
flipy
TopRight
flipy
BottomLeft
flipy
BottomRight 
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flipy">flipy</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flipyUp">flipyUp</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flipyDown">flipyDown</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flipyLeft">flipyLeft</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flipyRight">flipyRight</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flipyTopLeft">flipyTopLeft</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flipyTopRight">flipyTopRight</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flipyBottomLeft">flipyBottomLeft</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flipyBottomRight">flipyBottomRight</div>

Zoom In/Out Animation Examples

Use Below examples of animations in tailwind css to animate html elements.

zoomin
zoomout
zoominup
zoomin
down
zoominleft
zoomin
right
zoomin
topleft
zoomin
topright
zoomin
bottomleft
zoomin
bottomright
zoomoutup
zoomout
down
zoomout
left
zoomout
right 
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-zoomin">zoomin</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-zoomOut">zoomout</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-zoomInUp">zoomInUp</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-zoomInDown">zoomInDown</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-zoomInLeft">zoomInLeft</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-zoomInRight">zoomInRight</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-zoomInTopLeft">zoomInTopLeft</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-zoomInTopRight">zoomInTopRight</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-zoomInBottomLeft">zoomInBottomLeft</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-zoomInBottomRight">zoomInBottomRight</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-zoomOutUp">zoomOutUp</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-zoomOutDown">zoomOutDown</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-zoomOutLeft">zoomOutLeft</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-zoomOutRight">zoomOutRight</div>