Instant CSS
Tools
Templates
Components
Learn
More
Fade In Right
Animation
Slides in from the right with a fade.
Reset to Default
HTML
Copy HTML
<div class="fade-right">Hello from the right</div>
CSS
Copy CSS
.fade-right { font-family: sans-serif; font-size: 22px; font-weight: 600; color: #ec4899; animation: fadeInRight 1s ease-out both; } @keyframes fadeInRight { from { opacity: 0; transform: translate3d(60px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
Live Preview
Hello from the right
Tip:
Edit the HTML or CSS on the left to instantly see changes in the preview.