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