transition
transition allows to add an effect while changing from one style to another. You can set the which property you want to transition, duration, how you want to transit (linear, ease, ease-in, ease-out, cubic-bezier) and delay when transition will start. you can transition more than one property by comma separation.
transition parameters
There are four parameters for CSS transitions:
transition-property:
The property to be tweened, or the keyword ‘all’ to apply to all properties.
transition-duration:
The duration of the transition.
transition-timing-function:
Specifies a function to define how intermediate values for properties are computed. Timing functions determine how intermediate values of the transition are calculated.
transtion-delay:
Specifies a delay to the start of the transition.
In addition, you can also use the shorthand property where the parameters are specified as property, duration, timing function, delay.
Example
div {
transition-property: width;
transition-duration: 5s;
transition-timing-function: linear;
transition-delay: 2s;
}
