CSS Transition Timing
This page covers the CSS transition timing function and delay properties.
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 endease-in- transition will start slowease-out- transition will end slowease-in-out- transition will have a slow start and endcubic-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
Some different speed curves for transition:
#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;}
Try it Yourself »
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:
Transition + Transform
The following example combines transition and transform for a <div>:
Example
div {
transition:
width 2s, height 2s, background-color 2s, transform 2s;
}
Try it Yourself »
The following example combines transition and transform for a button:
Example
button {
transition: background-color 1s ease-out, transform 1s
ease-out;
}
Try it Yourself »
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;
}
Try it Yourself »
or by using the shorthand property
transition:
CSS Transition Properties
The following table lists all the CSS transition properties:
| Property | Description |
|---|---|
| transition | A shorthand property for setting the four transition properties into a single property |
| transition-delay | Specifies a delay (in seconds) for the transition effect |
| transition-duration | Specifies how many seconds or milliseconds a transition effect takes to complete |
| transition-property | Specifies the name of the CSS property the transition effect is for |
| transition-timing-function | Specifies the speed curve of the transition effect |
