animation-timing-function

animation-timing-function property

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.

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 (x₁, y₁, x₂, y₂) of the P₁ and P₂ 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 visual no ease

Remarks

Do not use the Microsoft vendor prefix ("-ms-") before the CSS animations properties. They are supported unprefixed in Internet Explorer 10 and later.

As of Internet Explorer for Windows Phone 8.1 Update, Internet Explorer for Windows Phone supports "-webkit-animation-timing-function" as an alias for this property.

a
abbr
acronym
b
bdo
big
blockQuote
br
button
cite
code
CSSStyleDeclaration
currentStyle
dd
del
dfn
div
dl
dt
em
fieldSet
form
i
img
input
ins
kbd
label
li
map
noFrames
noScript
object
ol
p
pre
q
samp
script
select
small
span
strong
style
sub
sup
table
tBody
td
textArea
tFoot
th