Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Roll In Animation Effect with CSS
The CSS roll in animation effect creates a smooth rolling motion where an element slides in from the left side while rotating. This animation combines translation and rotation transforms to simulate an object rolling into view like a wheel or ball.
Syntax
@keyframes rollIn {
0% {
opacity: 0;
transform: translateX(-100%) rotate(-120deg);
}
100% {
opacity: 1;
transform: translateX(0px) rotate(0deg);
}
}
.element {
animation: rollIn duration timing-function;
}
Example: Basic Roll In Animation
The following example demonstrates a roll in animation applied to a colored box −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
margin: 50px;
height: 200px;
}
.roll-box {
width: 100px;
height: 100px;
background: linear-gradient(45deg, #FF6B6B, #4ECDC4);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
animation: rollIn 2s ease-in-out;
}
@keyframes rollIn {
0% {
opacity: 0;
transform: translateX(-200px) rotate(-120deg);
}
100% {
opacity: 1;
transform: translateX(0px) rotate(0deg);
}
}
</style>
</head>
<body>
<div class="container">
<div class="roll-box">ROLL</div>
</div>
</body>
</html>
A colorful box with gradient background rolls in from the left side with a rotating motion, starting invisible and ending in its final position with full opacity.
Example: Roll In with Text
This example shows how to apply the roll in effect to text content −
<!DOCTYPE html>
<html>
<head>
<style>
.text-container {
margin: 50px;
text-align: center;
}
.roll-text {
font-size: 2em;
font-weight: bold;
color: #2C3E50;
display: inline-block;
animation: rollIn 1.5s ease-out;
}
@keyframes rollIn {
0% {
opacity: 0;
transform: translateX(-100px) rotate(-90deg);
}
50% {
opacity: 0.7;
transform: translateX(-20px) rotate(-30deg);
}
100% {
opacity: 1;
transform: translateX(0px) rotate(0deg);
}
}
</style>
</head>
<body>
<div class="text-container">
<h2 class="roll-text">Welcome!</h2>
</div>
</body>
</html>
The text "Welcome!" rolls in from the left with a smooth rotating motion, gradually appearing and settling into its final position.
Key Properties
| Property | Purpose |
|---|---|
translateX(-100%) |
Moves element completely off-screen to the left |
rotate(-120deg) |
Creates the initial rotation for rolling effect |
opacity: 0 |
Makes element invisible at the start |
transform: translateX(0) rotate(0) |
Final position with no transformation |
Conclusion
The roll in animation effect combines translation and rotation transforms to create an engaging entrance animation. You can customize the rotation angle, distance, and timing to achieve different rolling speeds and effects for your web elements.
Updated on: 2026-03-15T11:53:03+05:30
583 Views
Advertisements