Introduction to CSS Transitions

CSS transitions

CSS transitions are a mechanism that add intermediate steps when modifying CSS properties. By default, any changes made to a CSS property will take effect immediately. CSS transitions apply these changes over a configurable period with the intermediate steps calculated automatically by the browser.

For those who are already familiar with CSS animations, CSS transitions may seem like a simplified version of that. There are a few differences between the two. For example, CSS animations only has two states: the initial and the final. Meanwhile, CSS transitions have an action-based trigger mechanism, meaning that CSS transitions have to have something that triggers the transition to run, such as an addition of a ...