   # TRANSITION-TIMING-FUNCTION

The transition-timing-function property defines when the transition will start.

## SYNTAX

### CSS

``` transition-timing-function: value; ```

### JS

``` object.style.transitionTimingFunction = "value"; ```

### VALUES

``` <'transition-timing-function'> = <easing-function># ```
``` <easing-function> = linear | <cubic-bezier-easing-function> | <step-easing-function> ```
``` linear ```

Its output progress value is equal to the input progress value for all inputs.

``` <cubic-bezier-easing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) ```
``` ease ```

Equivalent to cubic-bezier(0.25, 0.1, 0.25, 1).

``` ease-in ```

Equivalent to cubic-bezier(0.42, 0, 1, 1).

``` ease-out ```

Equivalent to cubic-bezier(0, 0, 0.58, 1).

``` ease-in-out ```

Equivalent to cubic-bezier(0.42, 0, 0.58, 1).

``` cubic-bezier() ```

Specifies a cubic Bezier easing function. The four numbers specify points P1 and P2 of the curve as (x1, y1, x2, y2). Both x values must be in the range [0, 1] or the definition is invalid.

``` <number> ```

An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.

``` <step-easing-function> = step-start | step-end | steps(<integer>[, <step-position>]?) ```
``` step-start ```

Computes to steps(1, start)

``` step-end ```

Computes to steps(1, end)

``` steps() ```

The first parameter specifies the number of intervals in the function. It must be a positive integer greater than 0 unless the second parameter is jump-none in which case it must be a positive integer greater than 1. The second parameter, which is optional, specifies the step position.

``` <integer> ```

Specifies one or more decimal digits (0-9).

``` <step-position> = jump-start | jump-end | jump-none | jump-both | start | end ```
``` jump-start ```

The first rise occurs at input progress value of 0.

``` jump-end ```

The last rise occurs at input progress value of 1.

``` jump-none ```

All rises occur within the range (0, 1).

``` jump-both ```

The first rise occurs at input progress value of 0 and the last rise occurs at input progress value of 1.

``` start ```

Behaves as jump-start.

``` end ```

Behaves as jump-end.

ease

## EXAMPLES

### INTERNAL

transition

transition-delay

transition-duration

transition-property

### EXTERNAL

World Wide Web Consortium (W3C)