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
CSS animation-timing-function property
The CSS animation-timing-function property specifies the speed curve of an animation. It defines how an animation progresses during its duration, controlling whether the animation starts slow and speeds up, starts fast and slows down, or maintains a constant speed.
Syntax
animation-timing-function: value;
Possible Values
| Value | Description |
|---|---|
ease |
Slow start, fast middle, slow end (default) |
ease-in |
Slow start, then fast |
ease-out |
Fast start, then slow |
ease-in-out |
Slow start, fast middle, slow end |
linear |
Constant speed throughout |
cubic-bezier(x1,y1,x2,y2) |
Custom timing function |
Example: Different Timing Functions
The following example demonstrates various timing functions applied to animated boxes −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 400px;
height: 300px;
border: 2px solid #ccc;
position: relative;
margin: 20px 0;
}
.box {
width: 60px;
height: 60px;
position: absolute;
background-color: #ff6b6b;
left: 0;
animation-name: moveRight;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
text-align: center;
}
#ease { top: 20px; animation-timing-function: ease; }
#ease-in { top: 100px; animation-timing-function: ease-in; background-color: #4ecdc4; }
#ease-out { top: 180px; animation-timing-function: ease-out; background-color: #45b7d1; }
#linear { top: 260px; animation-timing-function: linear; background-color: #96ceb4; }
@keyframes moveRight {
from { left: 0; }
to { left: 320px; }
}
</style>
</head>
<body>
<div class="container">
<div class="box" id="ease">ease</div>
<div class="box" id="ease-in">ease-in</div>
<div class="box" id="ease-out">ease-out</div>
<div class="box" id="linear">linear</div>
</div>
</body>
</html>
Four colored boxes animate horizontally with different timing functions: - Red box (ease): starts slow, speeds up, then slows down - Teal box (ease-in): starts very slow, then accelerates - Blue box (ease-out): starts fast, then decelerates - Green box (linear): moves at constant speed
Example: Custom Cubic-Bezier Function
You can create custom timing functions using the cubic-bezier() function −
<!DOCTYPE html>
<html>
<head>
<style>
.custom-box {
width: 100px;
height: 100px;
background-color: #e74c3c;
position: relative;
animation: bounce 2s infinite;
animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
margin: 50px;
border-radius: 10px;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-150px); }
}
</style>
</head>
<body>
<div class="custom-box"></div>
</body>
</html>
A red box bounces up and down with a custom elastic timing function, creating an overshoot effect at both ends of the animation.
Conclusion
The animation-timing-function property controls how animations progress over time. Use predefined values like ease and linear for common effects, or cubic-bezier() for custom timing curves to create unique animation behaviors.
Updated on: 2026-03-15T12:43:51+05:30
83 Views
Advertisements