CSS Transition Property And its Example

CSS Transition?

Animations that involve transitioning between two states are often called implicit transitions as the states in between the start and final states are implicitly defined by the browser

CSS transitions let you decide which properties to animate (by listing them explicitly), when the animation will start (by setting a delay), how long the transition will last (by setting a duration), and how the transition will run (by defining a timing function, e.g. linearly or quick at the beginning, slow at the end).


Example 1:


Result :


The transition Property

Example 2:


Result :

  

The transition Property