Instant CSS
Tools
Templates
Components
Learn
More
Slide Out Right
Animation
Slides off the screen to the right.
Reset to Default
HTML
Copy HTML
<div class="slide-out">Slide Out →</div>
CSS
Copy CSS
.slide-out { padding: 14px 26px; background: #f97316; color: white; border-radius: 10px; font-family: sans-serif; font-weight: 700; animation: slideOutRight 2s ease-in-out infinite; } @keyframes slideOutRight { 0% { transform: translate3d(0, 0, 0); opacity: 1; } 60% { transform: translate3d(120%, 0, 0); opacity: 0; } 100% { transform: translate3d(0, 0, 0); opacity: 1; } }
Live Preview
Slide Out →
Tip:
Edit the HTML or CSS on the left to instantly see changes in the preview.