This topic has not yet been rated - Rate this topic

# transition-timing-function property

Gets or sets one or more values that specify the intermediate property values to be used during a transition on a set of corresponding object properties identified in the transition-property property.

### Syntax

`transition-timing-function: cubic-bezier | ease | linear | ease-in | ease-out | ease-in-out | steps | step-start | step-end [ , cubic-bezier | ease | linear | ease-in | ease-out | ease-in-out | steps | step-start | step-end ] *`

### Property values

One or more animation timing functions, separated by commas.

`cubic-bezier`

A timing function, based on a cubic Bézier 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 shown in the following image.

`ease`

Default. A timing function, based on a cubic Bézier 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 Bézier 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 Bézier 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 Bézier 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 Bézier 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`

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 all elements, :before and :after pseudo elements interactive no ease

### Remarks

Values are rounded up to the second decimal place.

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

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
blockQuote
div
dl
fieldSet
form
noFrames
noScript
ol
p
pre
table
ul
dd
dt
li
tBody
td
tFoot
th
tr
button
del
ins
map
object
script
How to bring your webpage to life with CSS transforms, transitions, and animations