How to use transitions in CSS

Transitions in CSS are a way of customizing element’s animation properties. Instead of having a property (e.g. size of an element) change immediately in one step, the element can be caused to change its property slowly, over time, resulting in a smooth animation.

Syntax

CSS transitions are controlled using the transition property. The default syntax to define a transition on a <ele> might look like this:

ele {
    transition: <property> <duration> <timing-function> <delay>;
}

The transition property has different sub-properties that can be used to individually control the component transitions.

Example

Have a look at the example transition animation of a div element given below.

• transition-property: Width, height, background-color, and font-size has been applied to the transition property on. These properties of the box elements animate during the transition.

• transition-duration: This is how long the animation lasts for. You might notice the difference in the forward and backward animation due to different delay duration for both in the CSS.

• transition-timing-function: The transition timing function for both forward and backward animation is set to be the same (ease-in-out).

• transition-delay: The transition delay is set only for the backward animation; when the box comes back to its original form.

Feel free to change any of the following properties and notice the effects.