Transition Timing

CSS Transition Speed Curve

The transition-timing-function property specifies the speed curve of the transition effect.

This property can have one of the following values:

• ease - transition will start slow, then go fast, and end slow (this is default)

• linear - transition will keep the same speed from start to end

• ease-in - transition will start slow

• ease-out - transition will end slow

• ease-in-out - transition will have a slow start and end

• cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function

The following example shows some of the different speed curves that can be used:

Example

#div1 {transition-timing-function: linear;}
#div2
{transition-timing-function: ease;}
#div3 {transition-timing-function:
ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5
{transition-timing-function: ease-in-out;}

CSS Transition Delay

The transition-delay property specifies a delay before the transition starts.

The transition-delay value is defined in seconds (s) or milliseconds (ms).

The following example has a 1 second delay before starting:

Example

div {

transition-delay: 1s;
}

Transition + Transform

The following example combines transition and transform for a <div>:

Example

div {
  transition:
width 2s, height 2s, background-color 2s, transform 2s;
}

The following example combines transition and transform for a button:

Example

button {
  transition: background-color 1s ease-out, transform 1s
  ease-out;
}

More Transition Examples

The CSS transition properties can be specified one by one, like this:

Example

div
{
  transition-property: width;

transition-duration: 2s;

transition-timing-function: linear;

  transition-delay: 1s;

}

or by using the shorthand property transition:

Example

div
{

transition: width 2s linear 1s;

}

CSS Transition Properties

The following table lists all the CSS transition properties: