Instant CSS
Tools
Templates
Components
Learn
More
Zoom Out
Animation
Scales down and fades away.
Reset to Default
HTML
Copy HTML
<div class="zoom-out">Closing…</div>
CSS
Copy CSS
.zoom-out { padding: 16px 28px; background: #475569; color: white; border-radius: 12px; font-family: sans-serif; font-weight: 700; animation: zoomOut 2s ease-in-out infinite; } @keyframes zoomOut { 0% { opacity: 1; transform: scale(1); } 60% { opacity: 0; transform: scale(0.3); } 100% { opacity: 1; transform: scale(1); } }
Live Preview
Closing…
Tip:
Edit the HTML or CSS on the left to instantly see changes in the preview.