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
Formatted code
#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;}Live preview
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
Formatted code
div {
transition-delay: 1s;
}Live preview
Transition + Transform
The following example combines transition and transform for a <div>:
Example
Formatted code
div {
transition: width 2s, height 2s, background-color 2s, transform 2s;
}Live preview
The following example combines transition and transform for a button:
Example
Formatted code
button {
transition: background-color 1s ease-out, transform 1s
ease-out;
}Live preview
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 |