Windows-Apps
EN
Dieser Inhalt ist in Ihrer Sprache leider nicht verfügbar. Im Folgenden finden Sie die englische Version.

# 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 (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 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

As of Microsoft Edge, the "-ms-" prefixed version of this property is not supported.

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 a Windows Store app using JavaScript.

To learn more about Cascading Style Sheets (CSS) transitions in a Windows Store app using JavaScript, see How to bring your webpage to life with CSS transforms, transitions, and animations.

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

a
abbr
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