Specifies the intermediate property values to be used during a single cycle of an animation on a set of corresponding object properties identified in the Cascading Style Sheets (CSS) @keyframes at-rule specified by the animation-name property.
This property is read/write.
  |
Syntax
animation-timing-function: [ cubic-bezier( x1, y1, x2, y2 ) | ease | linear | ease-in | ease-out | ease-in-out | steps( <interval_number> [, start | end ]) | step-start | step-end ] [ , [ cubic-bezier( x1, y1, x2, y2 ) | ease | linear | ease-in | ease-out | ease-in-out | steps( <interval_number> [, start | end ]) | step-start | step-end ] ] *
Property values
One or more of the following animation timing functions, separated by commas.
cubic-bezier( x1, y1, x2, y2 )-
A timing function, based on a cubic Bezier curve, that takes four parameters. The four values specify the x and y-coordinates as (x1, y1, x2, y2) of the P1 and P2 points of the curve, respectively.
Note For properties other than opacity and color, the cubic-bezier curve function accepts y-coordinates outside the standard range of [0, 1]. This allows the ability to specify "elastic" effects for properties such as length and width, as illustrated in the following image.
ease-
Initial value. A timing function, based on a cubic Bezier curve, that gradually increases in speed at the start, animates at full speed, and then gradually decreases in speed at the end. This function is equivalent to "cubic-bezier(0.25,0.1,0.25,1)".
linear-
A timing function, based on a cubic Bezier curve, that has a consistent speed from start to end. This function is equivalent to "cubic-bezier(0,0,1,1)".
ease-in-
A timing function, based on a cubic Bezier curve, that gradually increases in speed at the start. This function is equivalent to "cubic-bezier(0.42,0,1,1)".
ease-out-
A timing function, based on a cubic Bezier curve, that gradually decreases in speed at the end. This function is equivalent to "cubic-bezier(0,0,0.58,1)".
ease-in-out-
A timing function, based on a cubic Bezier curve, that gradually increases in speed at the start and then gradually decreases in speed at the end. This function is equivalent to "cubic-bezier(0.42,0,0.58,1)".
steps( <interval_number> [, start | end ])-
A stepped timing function that takes two parameters. The first parameter specifies the number of intervals; the optional second parameter specifies the point in the interval where the property value changes. The second parameter is constrained to the values "start" or "end", which is the default.
step-start-
A stepped timing function that is equivalent to "steps(1, start)".
step-end-
A stepped timing function that is equivalent to "steps(1, end)".
CSS information
| Applies To | block-level and inline-level elements |
|---|---|
| Media | visual |
| Inherited | no |
| Initial Value | ease |
Standards information
- CSS Animations Module Level 3, Section 3.4
Remarks
Do not use the Microsoft vendor prefix ("-ms-") before the CSS animations properties. They are supported unprefixed in Internet Explorer 10 and later.
To learn more about CSS animations, see How to bring your webpage to life with CSS transforms, transitions, and animations.
See also
- CSSStyleDeclaration
- currentStyle
- style
- a
- abbr
- acronym
- b
- bdo
- big
- br
- cite
- code
- dfn
- em
- i
- img
- input
- kbd
- label
- q
- samp
- select
- small
- span
- strong
- sub
- sup
- textArea
- tt
- var
- address
- blockQuote
- div
- dl
- fieldSet
- form
- noFrames
- noScript
- ol
- p
- pre
- table
- ul
- dd
- dt
- li
- tBody
- td
- tFoot
- th
- tHead
- tr
- button
- del
- ins
- map
- object
- script
- How to bring your webpage to life with CSS transforms, transitions, and animations
- Internet Explorer 10 Guide for Developers: CSS Animations
Send comments about this topic to Microsoft
Build date: 11/29/2012
