Instant CSS
Tools
Templates
Components
Learn
More
Tada
Animation
A celebratory wiggle-and-shake reveal.
Reset to Default
HTML
Copy HTML
<div class="tada">🎉 Tada!</div>
CSS
Copy CSS
.tada { font-family: sans-serif; font-size: 28px; font-weight: 800; color: #f59e0b; animation: tada 1.4s ease-in-out infinite; } @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); } }
Live Preview
🎉 Tada!
Tip:
Edit the HTML or CSS on the left to instantly see changes in the preview.