The animation-timing-function
CSS property specifies how a CSS animation should progress over the duration of each cycle.
/* Keyword values */ animation-timing-function: ease; animation-timing-function: ease-in; animation-timing-function: ease-out; animation-timing-function: ease-in-out; animation-timing-function: linear; animation-timing-function: step-start; animation-timing-function: step-end; /* Function values */ animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); animation-timing-function: steps(4, end); animation-timing-function: frames(10); /* Multiple animations */ animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1); /* Global values */ animation-timing-function: inherit; animation-timing-function: initial; animation-timing-function: unset;
It is often convenient to use the shorthand property animation
to set all animation properties at once.
Initial value | ease |
---|---|
Applies to | all elements, ::before and ::after pseudo-elements |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
Timing functions may be specified on individual keyframes in a @keyframes rule. If no animation-timing-function
is specified on a keyframe, the corresponding value of animation-timing-function
from the element to which the animation is applied is used for that keyframe.
A keyframe's timing function is applied on a property-by-property basis from the keyframe on which it is specified until the next keyframe specifying that property, or until the end of the animation if there is no subsequent keyframe specifying that property. As a result, an animation-timing-function
specified on the 100%
or to
keyframe will never be used.
Values
<timing-function>
- The timing function that corresponds to a given animation, as determined by
animation-name
.
Note: When you specify multiple comma-separated values on an animation-*
property, they will be assigned to the animations specified in the animation-name
property in different ways depending on how many there are. For more information, see Setting multiple animation property values.
Formal syntax
<single-timing-function>#where
<single-timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function> | <frames-timing-function>
where
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, [ start | end ] ]?)
<frames-timing-function> = frames(<integer>)
Examples
See CSS animations for examples.
Specifications
Specification | Status | Comment |
---|---|---|
CSS Animations The definition of 'animation-timing-function' in that specification. |
Working Draft | Initial definition. |
Browser compatibility
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 43 Yes -webkit- | Yes Yes -webkit- | 16 49 -webkit- 5 -moz- | 10 | 12.1 — 15 15 -webkit- 12 — 15 -o- | Yes 4 -webkit- |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | Yes Yes -webkit- | 43 Yes -webkit- | Yes Yes -webkit- | 16 49 -webkit- 5 -moz- | Yes | 12.1 — 15 15 -webkit- 12 — 15 -o- | Yes Yes -webkit- |
1. From version 44: this feature is behind the layout.css.prefixes.webkit
preference (needs to be set to true
). To change preferences in Firefox, visit about:config.
See also
- Using CSS animations
- JavaScript
AnimationEvent
API