animation-timing-function property (Internet Explorer)

0 out of 1 rated this helpful - Rate this topic

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.

CSS Animations Module Level 3, Section 3.4

Syntax

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.

Bezier curve of an "elastic" ease transtion function

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)".

Bezier curve of the ease transtion function

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)".

Bezier curve of the linear transtion function

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)".

Bezier curve of the ease-in transtion function

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)".

Bezier curve of the ease-out transtion function

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)".

Bezier curve of the ease-in-out transtion function

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