CSS 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 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:
#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:
Transition + Transform
The following example combines transition and transform for a <div>:
Example
transition: width 2s, height 2s, background-color 2s, transform 2s;
}
The following example combines transition and transform for a button:
Example
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
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
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 |