The transition
property is a shorthand property that combines up to four of the following properties:
The value of the transition-duration
property must always be specified, or else it will default to 0s, and the transition will not have any effect. The full syntax is as follows:
transition: property duration timing-function delay|initial|inherit;
div.tran {
transition: color .25s ease 25ms;
}
transition-property
Designates the name of the CSS property for which the transition effect is for.
transition-duration
Designates the number of seconds (s) or milliseconds (ms) the transition effect takes to complete.
transition-timing-function
Designates the speed curve of the transition effect.
transition-delay
Designates when the transition effect begins.
initial
Sets the property to its default value.
inherit
Inherits this property’s value from its parent item.
Have a code example of transition
? Submit a codepen.io demo and we'll showcase it here ↴