About Lesson
Animation Timing Function
he animation-timing-function property in CSS allows you to specify how the intermediate property values are calculated for an animation. It determines the pace of the animation, controlling the rate of change of the animated property over time. There are several predefined timing functions available, each creating a different effect:
- ease: Slow start, then fast, then slow end.
- ease-in: Starts slow and accelerates quickly.
- ease-out: Starts fast and decelerates slowly.
- ease-in-out: Starts slow, accelerates, then decelerates.
- linear: Constant speed throughout the animation.
- cubic-bezier(): Allows you to define a custom timing function using cubic Bezier curves.
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation Timing Functions</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box ease">Ease</div>
<div class="box ease-in">Ease-in</div>
<div class="box ease-out">Ease-out</div>
<div class="box ease-in-out">Ease-in-out</div>
<div class="box linear">Linear</div>
</body>
</html>
CSS
.box {
width: 100px;
height: 100px;
background-color: #3498db;
color: #fff;
text-align: center;
line-height: 100px;
margin: 10px;
font-family: Arial, sans-serif;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.ease {
animation-name: move-ease;
animation-timing-function: ease;
}
.ease-in {
animation-name: move-ease-in;
animation-timing-function: ease-in;
}
.ease-out {
animation-name: move-ease-out;
animation-timing-function: ease-out;
}
.ease-in-out {
animation-name: move-ease-in-out;
animation-timing-function: ease-in-out;
}
.linear {
animation-name: move-linear;
animation-timing-function: linear;
}
@keyframes move-ease {
0% { transform: translateX(0); }
100% { transform: translateX(200px); }
}
@keyframes move-ease-in {
0% { transform: translateX(0); }
100% { transform: translateX(200px); }
}
@keyframes move-ease-out {
0% { transform: translateX(0); }
100% { transform: translateX(200px); }
}
@keyframes move-ease-in-out {
0% { transform: translateX(0); }
100% { transform: translateX(200px); }
}
@keyframes move-linear {
0% { transform: translateX(0); }
100% { transform: translateX(200px); }
}
In this example:
- We have five
<div>elements with different classes, each representing a different timing function. - The
animation-timing-functionproperty is applied to each<div>class to define the pacing of the animations. - Each
<div>moves from left to right (transform: translateX(200px)) using different timing functions defined by@keyframes.