Transitions
CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration.
you can control the individual components of the transition with the following sub-properties:
- Transition: A shorthand property for setting the four transition properties into a single property.
div {
/* transition: <property> <duration> <timing-function> <delay>; */
background-color: #333;
transition: all 1s ease-out;
}
- transition-property: Specifies the name of the CSS property the transition effect is for.
div {
transition-property: opacity, left;
}
- transition-duration: Specifies how many seconds or milliseconds a transition effect takes to complete.
div {
/* <time> values*/
transition-duration: 4s;
/* <time: Right,Left,Top, bottom> */
transition-duration: 3s, 5s, 2s, 1s;
}
- transition-delay: Specifies a delay (in seconds) for the transition effect.
div {
transition-delay: 0.25s;
}
- transition-timing-function: Specifies the speed curve of the transition effect.
div {
transition-timing-function: linear;
}