| Introduction to CSS |
|---|
| Text and Font Styling |
|---|
| Box Model and Layout |
|---|
| Advanced Layout with Flexbox and Grid |
|---|
| Responsive Design |
|---|
| CSS Transitions and Animations |
|---|
The animation-timing-function property in CSS specifies the speed curve of an animation. It controls how the intermediate states of an animation are calculated, effectively defining the pacing of the animation sequence.
Syntax
animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int, start/end) | cubic-bezier(n,n,n,n);
Values
linear: The animation progresses at a constant pace from start to finish.
ease: This is the default value. The animation starts slowly, speeds up in the middle, and slows down towards the end (a combination of
ease-inandease-out).ease-in: The animation starts slowly and speeds up as it progresses.
ease-out: The animation starts quickly and slows down as it ends.
ease-in-out: The animation starts slowly, speeds up in the middle, and slows down towards the end.
step-start: The animation jumps immediately to the end state in the first keyframe.
step-end: The animation jumps immediately to the end state in the last keyframe.
steps(int, start/end): The animation divides into a specified number of intervals. The second parameter (
startorend) specifies whether the animation steps occur at the beginning or the end of each interval.cubic-bezier(n,n,n,n): Allows you to define your custom timing function using a cubic Bézier curve, with four control points ranging from 0 to 1.
Examples
Example 1: Linear
@keyframes move {
from { left: 0; }
to { left: 100px; }
}
.element {
animation: move 2s linear;
}
In this example, the element moves at a constant speed from left to right over 2 seconds.
Example 2: Ease
@keyframes move {
from { left: 0; }
to { left: 100px; }
}
.element {
animation: move 2s ease;
}
Here, the element starts moving slowly, speeds up in the middle, and slows down towards the end over 2 seconds.
Example 3: Steps
@keyframes jump {
from { top: 0; }
to { top: 100px; }
}
.element {
animation: jump 2s steps(4, end);
}
In this example, the element moves in 4 discrete steps from top to bottom over 2 seconds.
Example 4: Cubic Bezier
@keyframes move {
from { left: 0; }
to { left: 100px; }
}
.element {
animation: move 2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
This uses a custom cubic Bézier curve to create a unique animation speed curve where the element moves from left to right over 2 seconds.
Applying Multiple Timing Functions
If you have multiple animations defined, you can also apply different timing functions to each:
.element {
animation: move 2s ease-in, rotate 1s linear;
}
In this example, the ‘move‘ animation will use the ‘ease-in‘ timing function while the ‘rotate‘ animation will use the ‘linear‘ timing function.
Understanding Cubic Bezier Curves
The cubic Bézier curve is defined by four points: (0,0), (P1x, P1y), (P2x, P2y), and (1,1). The values P1x, P1y, P2x, and P2y determine the shape of the curve:
- (0,0) and (1,1) are fixed points (start and end).
- (P1x, P1y) and (P2x, P2y) are the control points that define the curvature.
For example, ‘cubic-bezier(0.68', '-0.55, 0.27', '1.55)‘:
- P1: (0.68, -0.55)
- P2: (0.27, 1.55)
These control points create a curve where the animation starts slowly, speeds up, and then slows down again, possibly even overshooting the target values before settling.
Visualizing Timing Functions
Many online tools, such as the cubic-bezier.com, allow you to visualize and experiment with cubic Bézier curves to better understand how different values affect the animation’s pacing.
By using the ‘animation-timing-function‘ property effectively, you can create more dynamic and engaging animations in your web projects.
