Export (0) Print
Expand All
Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.
0 out of 1 rated this helpful - Rate this topic

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.

This property is read/write.

CSS Animations Module Level 3, Section 3.4

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.

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

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 Toblock-level and inline-level elements
Mediavisual
Inheritedno
Initial Valueease

Standards information

Remarks

To learn more about CSS animations, see How to bring your webpage to life with CSS transforms, transitions, and animations.

See also

a
abbr
address
b
bdo
blockQuote
br
button
cite
code
CSSStyleDeclaration
currentStyle
dd
del
dfn
div
dl
dt
em
fieldSet
form
i
img
input
ins
kbd
label
li
map
object
ol
p
pre
q
samp
script
select
small
span
strong
style
sub
sup
table
tBody
td
textArea
tFoot
th
tHead
tr
ul
var
How to bring your webpage to life with CSS transforms, transitions, and animations
Internet Explorer 10 Guide for Developers: CSS Animations

 

 

Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback
Show:
© 2014 Microsoft. All rights reserved.