LogoBlockies Animate.

Tada Animation

FREE

A tada animation for alerts or notifications

Demo

Blur In
Exclusive Launch 50% offspots left: 0 / 50
3D Cube - happy face3D Cube - Happy Face
$39.99

$19.99

Payment once and get lifetime access
Access to all animations
All updates
All animations
No subscriptions

Installation

1

Copy and paste the following code into your project.

Add the class animate-tada to the element you want to animate.

global.css

@layer utilities {
    // START HERE ------------------------------------------------------------
    .animate-tada {
        animation: tada 1s ease-in-out;
    }

    @keyframes tada {
      0% {
        transform: scale(1) rotate(0deg);
      }
      10%, 20% {
        transform: scale(0.9) rotate(-3deg);
      }
      30%, 50%, 70%, 90% {
        transform: scale(1.1) rotate(3deg);
      }
      40%, 60%, 80% {
        transform: scale(1.1) rotate(-3deg);
      }
      100% {
        transform: scale(1) rotate(0deg);
      }
    }
    // END HERE ------------------------------------------------------------
}
2

Use the class animate-tada to apply the animation to an element.