Animation Timing Function Property
Last updated: 2026-09-13
animation-timing-function Animation Timing Function Property
The animation-timing-function property defines how the speed of an animation changes over time — whether it runs at a constant rate, starts fast and slows down, or feels bouncy. By controlling the time distribution of intermediate frames, it makes motion feel more physical or more stylized, and is a key property for polished animation quality.
| Category | |
|---|---|
| Initial Value | ease |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
animation-timing-function: ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end | steps(<integer>) | cubic-bezier(<number>,<number>,<number>,<number>);⚙️ Values
| Value | Type | Description |
|---|---|---|
ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end | steps() | cubic-bezier() | Keyword | The animation's speed curve |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| animation-timing-function | ✓ v43 | ✓ v12 | ✓ v16 | ✓ v9 | ✓ v30 |
| Supported in all major browsers | |||||
Tip： cubic-bezier() lets you define any custom Bezier curve; tools like cubic-bezier.com visualize it interactively. steps() is used for frame-by-frame animations such as sprite sheets.
Tip： ease is the default and behaves as slow-fast-slow. linear at constant speed suits continuous rotation; ease-out is common when elements enter the screen, and ease-in when they leave.
❓ FAQ
QIs transition-timing-function the same as animation-timing-function?
AThe accepted values are identical — ease, linear, cubic-bezier(), steps(), and so on — but they act on different things: the first applies to transitions, the second to animations. Both control the relationship between time and progress, not distance and speed, so the same cubic-bezier value produces the same effect in both places.
QHow do I create a bouncy or elastic effect with cubic-bezier?
AUse cubic-bezier() with y values that go outside the 0-1 range, for example cubic-bezier(0.68, -0.55, 0.27, 1.55). When the curve overshoots the range, the element moves past the target value first and then springs back, producing an elastic feel. These overshooting curves fit lively interactions such as bouncing buttons and pop-up entrances.
QHow do I write a steps() frame-by-frame animation, and when should I use it?
Asteps(n) divides the animation into n equal segments, and the value jumps between segments instead of interpolating continuously. Combined with a sprite sheet it produces frame-by-frame animation, where each frame lasts duration / n. jump-start keeps the first frame, jump-end keeps the last, and step-start/step-end are the shorthand forms.
QWhat is the difference between ease, ease-in, ease-out, and linear, and when do I use which?
Aease (the default) starts fast and ends slowly, a good general-purpose choice. ease-in starts slowly and speeds up, fitting elements that leave the screen. ease-out starts fast and decelerates, fitting elements that enter — such as pop-ups and cards sliding in. ease-in-out is slow at both ends, good for looping effects like breathing lights. linear is constant speed throughout, ideal for rotations and progress bars.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
