This property accepts the same standard keyword values as transition-timing-function, ease, linear, ease-in, ease-out, and ease-in-out, but additionally supports the steps() function, which is unique to more complex, multi-keyframe animations and produces an animation that jumps directly between a fixed number of discrete positions, rather than interpolating smoothly, useful for effects like a sprite-sheet animation or a mechanical, ticking-clock-style motion. When more than two keyframes are defined, the specified timing function's easing curve applies independently to each individual segment between consecutive keyframes, not as a single easing curve stretched across the entire overall animation.
1Understanding Animation-timing-function
This property accepts the same standard keyword values as transition-timing-function, ease, linear, ease-in, ease-out, and ease-in-out, but additionally supports the steps() function, which is unique to more complex, multi-keyframe animations and produces an animation that jumps directly between a fixed number of discrete positions, rather than interpolating smoothly, useful for effects like a sprite-sheet animation or a mechanical, ticking-clock-style motion. When more than two keyframes are defined, the specified timing function's easing curve applies independently to each individual segment between consecutive keyframes, not as a single easing curve stretched across the entire overall animation.
Use steps(n) instead of a smooth easing keyword specifically for effects that should visibly jump between a fixed number of discrete positions, like a sprite-sheet frame animation or a mechanical, ticking clock hand, rather than interpolating smoothly between them.
@keyframes tick {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.clock-hand {
animation: tick 12s steps(12) infinite;
}2Practical Example
Here is a real-world application of Animation-timing-function showing how it is used in production CSS code.
@keyframes sprite {
from { background-position: 0 0; }
to { background-position: -800px 0; }
}
.character {
animation: sprite 0.8s steps(8) infinite;
}3Best Practices
Follow these guidelines when working with Animation-timing-function:
1. Use steps(n) for sprite-sheet or frame-based animations, and other effects that should visibly jump between discrete positions rather than smoothly interpolate
2. Remember the specified timing function applies independently to each segment between consecutive keyframes in a multi-keyframe animation, not as one single curve stretched across the whole animation
3. Match the timing function's character to the animation's intended feel, a bouncy, playful effect might call for a custom cubic-bezier() curve rather than one of the standard, more neutral keyword presets
Tip: Use steps(n) instead of a smooth easing keyword specifically for effects that should visibly jump between a fixed number of discrete positions, like a sprite-sheet frame animation or a mechanical, ticking clock hand, rather than interpolating smoothly between them.
@keyframes tick {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.clock-hand {
animation: tick 12s steps(12) infinite;
}