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
Specify the speed curve of the animation with CSS
The CSS animation-timing-function property specifies the speed curve of an animation, controlling how the animation progresses over time. This property determines whether the animation starts slow and speeds up, starts fast and slows down, or maintains a constant speed.
Syntax
selector {
animation-timing-function: value;
}
Possible Values
| Value | Description |
|---|---|
ease |
Default. Slow start, fast middle, slow end |
ease-in |
Slow start, then speeds up |
ease-out |
Fast start, then slows down |
ease-in-out |
Slow start and end, fast middle |
linear |
Constant speed throughout |
Example
The following example demonstrates different timing functions applied to animated boxes −
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 50px;
position: relative;
background-color: #4CAF50;
margin: 10px 0;
color: white;
display: flex;
align-items: center;
justify-content: center;
animation-name: slideMove;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes slideMove {
from { left: 0px; }
to { left: 300px; }
}
#demo1 { animation-timing-function: ease; }
#demo2 { animation-timing-function: ease-in; }
#demo3 { animation-timing-function: ease-out; }
#demo4 { animation-timing-function: linear; }
</style>
</head>
<body>
<div id="demo1">ease</div>
<div id="demo2">ease-in</div>
<div id="demo3">ease-out</div>
<div id="demo4">linear</div>
</body>
</html>
Four green boxes animate from left to right with different speed curves: - "ease": Starts slow, speeds up in middle, ends slow - "ease-in": Starts very slow, then accelerates - "ease-out": Starts fast, then decelerates - "linear": Moves at constant speed throughout
Conclusion
The animation-timing-function property provides fine control over animation pacing. Choose ease for natural movement, linear for mechanical effects, or ease-in/ease-out for specific acceleration patterns.
Updated on: 2026-03-15T12:46:35+05:30
408 Views
Advertisements