CSS animation-timing-function Property
Specifies the animation's speed curve.
- ease : The animation begins slowly, then quickly, and lastly slowly.
- linear: The animation moves at the same speed from beginning to conclusion.
- ease-in: The animation begins slowly.
- ease-out: The animation has a leisurely ending.
- ease-in-out: The animation begins and stops slowly.
Syntax
Property Values
| Value | Description |
|---|---|
| linear | The animation moves at the same speed from beginning to conclusion. |
| ease | The animation begins slowly, then quickly, and lastly slowly. |
| ease-in | The animation begins Slowly |
| ease-out | The animation has a leisurely ending. |
| ease-in-out | The animation begins and stops slowly. |
| step-start | Steps equivalent (1, start) |
| step-end | Steps equivalent (1, end) |
| steps(int,start|end) | A stepping function with two arguments is specified. The function's first argument defines the number of intervals. It has to be a positive number (greater than 0). The second argument, which is optional, has the value "start" or "end" and defines the point inside the period at which the values change. If the second argument is missing, the value "end" is assigned to it. |
| cubic-bezier(n,n,n,n) |
In the cubic-bezier function, enter your own values. Numeric values ranging from 0 to 1 are possible. |
| initial | Set this property's value to the default. |
| inherit | This attribute is inherited from its parent element. |
Supported Browsers
| Element | Chrome | Firefox | Safari | Edge / IE | Opera |
|---|---|---|---|---|---|
| animation-timing-function |
43.0
4.0 -webkit- |
16.0
5.0 -moz- |
9.0
4.0 -webkit- |
10.0 |
30.0
15.0 -webkit- 12.0 -o- |