The transition property

The first step in CSS animation is understanding the transition property and its values. A transition is a property that enables CSS elements to change from one state to another in a smooth, animated manner.

Consider the following example:

.target {
  font-size: 14px;
  transition: font-size 4s 1s;
}
.target:hover {
  font-size: 36px;
}

In this example, the transition property is applied to the target class to change the font-size attribute from 14 px to 36 px on hover. Within this example, we can observe the following:

• The transition property is described within the element’s original value, not in the changed one
• It’s possible to specify the element that will change within the transition property
• We can set the transition duration immediately after describing which property will be the transition target or as the first attribute (4s)

Consider another example:

.target {
  ...