Instant CSS
Tools
Templates
Components
Learn
More
Fade Out Down
Animation
Fades out while sliding down.
Reset to Default
HTML
Copy HTML
<div class="fade-out-down">Goodbye</div>
CSS
Copy CSS
.fade-out-down { font-family: sans-serif; font-size: 22px; font-weight: 700; color: #ef4444; animation: fadeOutDown 1.6s ease-in-out infinite; } @keyframes fadeOutDown { 0% { opacity: 1; transform: translate3d(0, 0, 0); } 80% { opacity: 0; transform: translate3d(0, 40px, 0); } 100% { opacity: 1; transform: translate3d(0, 0, 0); } }
Live Preview
Goodbye
Tip:
Edit the HTML or CSS on the left to instantly see changes in the preview.