Instant CSS
Tools
Templates
Components
Tailwind Components
Animations
Learn
More
Shake
Animation
Wiggle effect often used for errors or invalid input.
Reset to Default
HTML
Copy HTML
<input type="text" value="Invalid Input" class="shake-input" readonly />
CSS
Copy CSS
.shake-input { padding: 10px; border: 2px solid #ef4444; border-radius: 6px; color: #ef4444; font-family: sans-serif; animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both infinite; transform: translate3d(0, 0, 0); } @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } }
Live Preview
Tip:
Edit the HTML or CSS on the left to instantly see changes in the preview.