Animation Timing Functions
The timing function controls the speed curve over each keyframe interval — not the entire animation. Each keyframe pair can have its own timing.
CSS
Intermediate
5 min read
animation-timing-function
Example
@keyframes bounce {
0% { transform: translateY(0); animation-timing-function: ease-out; }
50% { transform: translateY(-40px); animation-timing-function: ease-in; }
100% { transform: translateY(0); }
}
.bouncing {
animation: bounce 0.6s infinite;
} Pro Tip
Set timing functions inside @keyframes at specific stops to control per-segment acceleration independently.