Instant CSS
Tools
Templates
Components
Learn
More
Roll In
Animation
Rolls in from the left while rotating.
Reset to Default
HTML
Copy HTML
<div class="roll-box">Roll In</div>
CSS
Copy CSS
.roll-box { width: 100px; height: 100px; background: #f59e0b; color: white; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-family: sans-serif; font-weight: 700; animation: rollIn 1s ease-out both; } @keyframes rollIn { from { opacity: 0; transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
Live Preview
Roll In
Tip:
Edit the HTML or CSS on the left to instantly see changes in the preview.