Loading lesson path
Formula
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
Formula
- 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 functionThe following example shows some of the different speed curves that can be used:
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;}Formula
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:
Add a 1 second delay before starting:
div {
transition-delay: 1s;
}Formula
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;
}The CSS transition properties can be specified one by one, like this:
{
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}or by using the shorthand property transition
{
transition: width 2s linear 1s;
}The following table lists all the CSS transition properties:
Formula
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 - functionSpecifies the speed curve of the transition effect