The animation-timing-function
property in CSS controls the pacing of an animation. It determines how the intermediate steps of the animation are calculated, which affects the speed curve of the animation. Essentially, it defines how the animation progresses over time, making the animation speed up, slow down, or maintain a constant speed.
Syntax
element {
animation-timing-function: function;
}
function
: Specifies the timing function to use. It can be one of several predefined values or a custom cubic-bezier function.
Common Values
linear
:- The animation progresses at a constant speed from start to end.
animation-timing-function: linear;
ease
:- The animation starts slowly, speeds up in the middle, and slows down at the end. This is the default value.
animation-timing-function: ease;
ease-in
:- The animation starts slowly and then speeds up.
animation-timing-function: ease-in;
ease-out
:- The animation starts quickly and then slows down towards the end.
animation-timing-function: ease-out;
ease-in-out
:- The animation starts slowly, speeds up in the middle, and then slows down again towards the end.
animation-timing-function: ease-in-out;
cubic-bezier(n,n,n,n)
:- Allows you to define a custom timing function using a cubic-bezier curve. The values are four numbers between 0 and 1 that define the curve's control points.
animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
steps(number, [start|end])
:- Creates a stepping function where the animation jumps from one state to the next. The
number
specifies the number of steps, andstart
orend
specifies when the jump occurs within each step.
animation-timing-function: steps(4, end);
- Creates a stepping function where the animation jumps from one state to the next. The
Example
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Timing Function Example</title>
<style>
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-150px);
}
60% {
transform: translateY(-75px);
}
}
.animated-box {
width: 100px;
height: 100px;
background-color: red;
animation-name: bounce;
animation-duration: 2s;
animation-timing-function: ease-in-out;
}
</style>
</head>
<body>
<div class="animated-box"></div>
</body>
</html>
Explanation:
@keyframes bounce
:- Defines an animation that makes the element bounce up and down.
.animated-box
:- The
animation-name
property applies thebounce
animation. - The
animation-duration
property sets the animation to last 2 seconds. - The
animation-timing-function
property usesease-in-out
, which causes the bouncing effect to start slowly, speed up in the middle, and slow down at the end.
- The
Important Points
Default Value:
- The default value for
animation-timing-function
isease
, which provides a smooth start and end to the animation.
- The default value for
Timing Functions:
- Different timing functions create various visual effects. For example,
ease
provides a natural look, whilelinear
gives a uniform speed.
- Different timing functions create various visual effects. For example,
Cubic Bezier Functions:
- Custom cubic-bezier functions allow precise control over the timing of the animation. You can use online tools like Cubic Bezier Generator to create and visualize these curves.
Steps Timing Function:
- The
steps
function is useful for creating animations that have discrete changes rather than smooth transitions, like animation frames or progress bars.
- The