Instant CSS
Tools
Templates
Components
Learn
More
Jelly
Animation
A squishy jelly-like wobble.
Reset to Default
HTML
Copy HTML
<div class="jelly">Jelly</div>
CSS
Copy CSS
.jelly { width: 90px; height: 90px; background: #06b6d4; color: white; display: flex; align-items: center; justify-content: center; border-radius: 18px; font-family: sans-serif; font-weight: 700; animation: jelly 1.3s ease-in-out infinite; } @keyframes jelly { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(1.25, 0.75); } 40% { transform: scale(0.75, 1.25); } 60% { transform: scale(1.15, 0.85); } 70% { transform: scale(0.95, 1.05); } }
Live Preview
Jelly
Tip:
Edit the HTML or CSS on the left to instantly see changes in the preview.