Instant CSS
Tools
Templates
Components
Learn
More
Wobble
Animation
A playful wobble attention seeker.
Reset to Default
HTML
Copy HTML
<div class="wobble-box">Wobble</div>
CSS
Copy CSS
.wobble-box { padding: 15px 30px; background: #f59e0b; color: white; border-radius: 50px; font-family: sans-serif; font-weight: bold; animation: wobble 1s infinite; } @keyframes wobble { 0%, 100% { transform: translateX(0%); transform-origin: 50% 50%; } 15% { transform: translateX(-30px) rotate(-6deg); } 30% { transform: translateX(15px) rotate(6deg); } 45% { transform: translateX(-15px) rotate(-3.6deg); } 60% { transform: translateX(9px) rotate(2.4deg); } 75% { transform: translateX(-6px) rotate(-1.2deg); } }
Live Preview
Wobble
Tip:
Edit the HTML or CSS on the left to instantly see changes in the preview.