CSS transition

CSS transition changes (updates) the value of some CSS property from old to a new value within specific interval of time. This property occurs as a result of some event. This event may be onhover, onclick or an animation property.

It is a shorthand property of transition-property, transition-duration, transition-delay, and transition-timing-function.

transition-property

It represents the CSS property that we want to change (update) from old to the new one. The value of this property may be any animatable property.

<style>
div{
  transition-property:color;
  color:red;
}
div:hover{
  color:blue;
}
</style>
Try </>

In the above example, the value of transition-property is color of the text. When we hover the pointer over the <div> element, the color of the text changes from red to blue

More than vlaues can also be specified for the transition-property. All of the individual values are separated by comma.

<style>
div{
  transition-property:color,font-size,background-color;
  color:red;
  background-color:white;
  font-size:16px;
}
div:hover{
  color:white;
  background-color:red;
  font-size:20px;
}
</style>
Try </>

transition-duration

transition-duration defines the duration in which the transition of CSS property occurs. The value of this property represents time in seconds.

<style>
div{
  transition-property:background-color;
  transition-duration:2s;
  background-color:red;
}
div:hover{
  background-color:blue;
}
</style>
Try </>

The background-color change occurs from red to blue within 2s duration.

If more than values have been specified for the transition-duration, then corressponding values are specified in the same order.

<style>
div{
  transition-property:color,background-color;
  transition-duration:1s,5s;
  color:red;
  background-color:white;
}
div:hover{
  color:white;
  background-color:red;
}
</style>
Try </>

The example shows that the color and background-color change with 1s and 2s respectively.

transition-timing-fuction

This property allows the transition property to change speed over the time.

<style>
div{
  position:relative;
  transition-property:top;
  top:0px;
  transition-duration:2s;
  transition-timing-function:ease-in;
}
div:hover{
  top:100px;
}
</style>
Try </>

There are four values of transition-timing-fuction such as ease, ease-in, ease-out and ease-in-out.

transition-delay

It delays the execution of the transition property. It represents the time after which the transition property should begin.

<style>
div{
  position:relative;
  transition-property:font-size;
  font-size:16px;
  transition-duration:1s;
  transition-delay:2s;
}
div:hover{
  font-size:20px;
}
</style>
Try </>

In the above example, the transition property should begin execution after 2s.