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
Set an animation with the same speed from start to end with CSS
The CSS animation-timing-function property with the linear value creates animations that maintain the same speed from start to end, without any acceleration or deceleration.
Syntax
selector {
animation-timing-function: linear;
}
Example: Linear Animation
The following example demonstrates a box moving horizontally with constant speed −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
height: 150px;
background-color: #f0f0f0;
border: 2px solid #ddd;
margin: 20px 0;
}
.box {
width: 80px;
height: 80px;
background-color: #4CAF50;
position: absolute;
top: 35px;
left: 0;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
animation: moveRight 3s linear infinite alternate;
}
@keyframes moveRight {
from { left: 0; }
to { left: calc(100% - 80px); }
}
</style>
</head>
<body>
<div class="container">
<div class="box">Linear</div>
</div>
</body>
</html>
A green box moves smoothly from left to right at constant speed, then returns to the starting position, repeating infinitely without any speed variations.
Comparison with Other Timing Functions
Here's a comparison showing different timing functions to highlight the linear effect −
<!DOCTYPE html>
<html>
<head>
<style>
.demo-container {
margin: 20px 0;
}
.track {
position: relative;
height: 60px;
background-color: #f9f9f9;
border: 1px solid #ccc;
margin: 10px 0;
}
.moving-box {
width: 50px;
height: 50px;
position: absolute;
top: 5px;
left: 0;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 12px;
animation: slide 2s infinite alternate;
}
.linear {
background-color: #2196F3;
animation-timing-function: linear;
}
.ease {
background-color: #FF9800;
animation-timing-function: ease;
}
@keyframes slide {
from { left: 0; }
to { left: calc(100% - 50px); }
}
</style>
</head>
<body>
<div class="demo-container">
<h3>Linear (constant speed):</h3>
<div class="track">
<div class="moving-box linear">Linear</div>
</div>
<h3>Ease (variable speed):</h3>
<div class="track">
<div class="moving-box ease">Ease</div>
</div>
</div>
</body>
</html>
Two boxes move across tracks. The blue "Linear" box maintains constant speed throughout. The orange "Ease" box starts slowly, speeds up in the middle, then slows down at the end.
Conclusion
The animation-timing-function: linear property ensures animations progress at a constant rate without acceleration or deceleration. This creates smooth, predictable motion perfect for mechanical or technical animations.
Updated on: 2026-03-15T12:44:57+05:30
306 Views
Advertisements