CSS Transitions
CSS transitions provide a way to control animation speed when changing CSS properties. ... With CSS transitions enabled, changes occur at time intervals that follow an acceleration curve, all of which can be customized.
| Parameter | Details |
|---|---|
| transition-property | The specific CSS property whose value change needs to be transitioned (or) all, if all the transitionable properties need to be transitioned. |
| transition-duration | The duration (or period) in seconds (s) or milliseconds (ms) over which the transition must take place. |
| transition-timing-function | A function that describes how the intermediate values during the transition are calculated. Commonly used values are ease, ease-in, ease-out, ease-in-out, linear, cubic-bezier(), steps(). |
| transition-delay | The amount of time that must have elapsed before the transition can start. Can be specified in seconds (s) or milliseconds (ms) |
Example
transition: background-color 1s;
- transition-property: Specifies the CSS properties the transition effect is for. In this case, the div will expand both horizontally and vertically when hovered.
- transition-duration: Specifies the length of time a transition takes to complete. In the above example, the height and width transitions will take 1 second and 500 milliseconds respectively.
- transition-timing-function: Specifies the speed curve of the transition effect. A linear value indicates the transition will have the same speed from start to finish.
- transition-delay: Specifies the amount of time needed to wait before the transition effect starts. In this case, the height will start transitioning immediately, whereas the width will wait 1 second.