Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Tada Animation Effect with CSS

CSS Web Development Front End Technology

The CSS tada animation effect creates a playful shaking motion that combines scaling and rotation transforms. This effect is perfect for drawing attention to elements like buttons, notifications, or call-to-action items.

Syntax

@keyframes tada {
    0% { transform: scale(1); }
    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(0); }
}

.element {
    animation-name: tada;
    animation-duration: 1s;
}

Example: Basic Tada Animation

The following example creates a tada animation effect on a button ?

<!DOCTYPE html>
<html>
<head>
<style>
    .button {
        background-color: #4CAF50;
        color: white;
        padding: 15px 32px;
        text-align: center;
        display: inline-block;
        font-size: 16px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        margin: 50px;
    }
    
    .animated {
        animation-duration: 1s;
        animation-fill-mode: both;
    }
    
    @keyframes tada {
        0% { transform: scale(1); }
        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(0); }
    }
    
    .tada {
        animation-name: tada;
    }
</style>
</head>
<body>
    <button class="button animated tada">Click Me!</button>
    <button onclick="location.reload()">Reload Animation</button>
</body>
</html>

A green button appears that shakes with a tada animation effect, combining scaling and rotation movements. The animation runs once when the page loads.

Example: Hover-Triggered Tada Effect

This example triggers the tada animation on hover ?

<!DOCTYPE html>
<html>
<head>
<style>
    .card {
        width: 200px;
        height: 150px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
        margin: 50px auto;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    @keyframes tada {
        0% { transform: scale(1); }
        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(0); }
    }
    
    .card:hover {
        animation: tada 0.8s ease-in-out;
    }
</style>
</head>
<body>
    <div class="card">Hover Me!</div>
</body>
</html>

A purple gradient card appears that performs the tada animation when you hover over it, creating an engaging interactive effect.

Key Properties

Property Purpose Typical Value
animation-duration Controls animation speed 1s (recommended)
animation-fill-mode Maintains final state both
transform Creates scale and rotation effects scale() and rotate()

Conclusion

The tada animation effect combines scaling and rotation transforms to create an attention-grabbing shake motion. It's ideal for interactive elements and can be triggered on page load, hover, or click events to enhance user engagement.

Updated on: 2026-03-15T11:57:21+05:30

507 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements