animation-timing-function
animation-timing-function
This page has been flagged with the following issues:
High-level issues:
W3C Working Draft
Summary
Sets the pace of the transition to the next keyframe of an animation
Overview table
| Initial value | ease
|
|---|---|
| Applies to | all elements |
| Inherited | No |
| Media | visual |
| Computed value | as specified |
| Animatable | No |
| CSS Object Model Property | animationTimingFunction
|
Syntax
-
animation-timing-function: ease -
animation-timing-function: linear -
animation-timing-function: ease-in -
animation-timing-function: ease-out -
animation-timing-function: ease-in-out -
animation-timing-function: cubic-bezier() -
animation-timing-function: steps() -
animation-timing-function: step-start -
animation-timing-function: step-end
Values
- ease
- Default. Starts and stops gradually, equivalent to cubic-bezier(0.25,0.1,0.25,1)
- linear
- Starts and stops immediately, progressing at a constant rate, equivalent to cubic-bezier(0,0,1,1).
- ease-in
- Starts gradually and stops suddenly, equivalent to cubic-bezier(0.42,0,1,1).
- ease-out
- Starts suddenly and stops gradually, equivalent to cubic-bezier(0,0,0.58,1).
- ease-in-out
- Starts and stops gradually, equivalent to cubic-bezier(0.42,0,0.58,1).
- cubic-bezier()
- Function value specifying a customized response curve.
- steps()
- Function value specifying a series of discrete intervals.
- step-start
- The change occurs instantly at the start of the keyframe, equivalent to steps(1, start).
- step-end
- The change occurs instantly at the end of the keyframe, equivalent to steps(1, end).
Examples
View live exampleA fast-moving sequence uses linear timing to highlight an abrupt transition within the keyframes, from a moving to a stopped state:
CSS
div {
animation-duration : 0.5s;
animation-fill-mode : both;
animation-iteration-count : 1;
animation-name : fastSlide;
animation-timing-function : linear;
transform-origin : bottom;
}
@keyframes fastSlide {
0% { transform: translate(120%) skewX(-30deg) ; }
70% { transform: translate(0%) skewX(-30deg) ; }
80% { transform: translate(0%) skewX(20deg) ; }
95% { transform: translate(0%) skewX(-10deg) ; }
100% { transform: translate(0%) skewX(0deg) ; }
}
Usage
The property controls how the browser calculates intermediate values between each keyframe, not the course of the entire animation.
It can be added to individual keyframes within a @keyframes rule, or to a style rule that applies an animation to an element. When specified in a style rule, this property sets the default timing function for each keyframe, but values specified within a @keyframes rule take precedence. If no value is set, the default ease value applies.
Along with other animation properties, multiple values separated by commas apply to animations in the same order as they are listed by the animation-name property. Excess values are ignored. If there are fewer values than animations, they're recycled in order of declaration until their numbers match.
Compatibility
Desktop
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic Support | 4.0 -webkit |
16.0 5.0 -moz |
10.0 | 12.1 12.0 -o |
3.1 -webkit
|
Mobile
| Feature | Android | BlackBerry | Chrome for mobile | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Opera Mini | Safari Mobile |
|---|---|---|---|---|---|---|---|---|
| Basic Support | 2.1 -webkit |
7.0 -webkit |
18.0 -webkit |
16.0 15.0 -moz |
WP 8 (IE 10) | 12.1 | Unsupported | 3.2 -webkit
|
Compatibility notes
| Browser | Version | Note |
|---|---|---|
| Internet Explorer | 10.0 | The -ms- prefix property is deprecated and should not be used. |
See also
Related articles
Animation
- animation-timing-function
Transitions
- animation-timing-function
This article contains content originally from external sources.
Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]
This tool helps to make and review comments inline.
How to Use
insert instructions, with images, here