Instant CSS
Tools
Templates
Components
Tailwind Components
Animations
Learn
More
Fade In Up
Animation
Smooth entrance animation.
Reset to Default
HTML
Copy HTML
<div class="fade-box">Hello!</div>
CSS
Copy CSS
.fade-box { font-family: sans-serif; font-size: 24px; font-weight: bold; opacity: 0; animation: fadeInUp 1s ease-out forwards; } @keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 40px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
Live Preview
Hello!
Tip:
Edit the HTML or CSS on the left to instantly see changes in the preview.