Css

In this tutorial, we'll talk about how to create transition effects for interactive components.
This tutorial requires modern browsers - Firefox, Chrome, Opera, IE10+.
The examples below won't work on IE9 and older.

Start Reading ;

The transition property

The transition property can help us to easily add transition effects to interactive components. We only need to specify which property will be changed and transition duration using the following syntax:

transition: property duration;

We also note that there are many CSS properties which are not animate-able: List of animate-able CSS properties.

Let’s make an example to see the transition property in action. We’re gonna visualize a spring field of which background-color is smoothly changed when we change the season.

HTML code:

CSS code:

Result:

See the Pen Life by Kei Nart (@codenart) on CodePen.

If we want to create transition effect with more than 1 property, the most simple way is to use the keyword all instead of a certain property name.

transition: all 1s;

The transition property can also have 2 more values which are timing-function and delay. For example, we can enhance the transition of the spring field above with linear timing and 0.5 second delay.

transition: all 1s linear 0.5s;

You can find other timing-functions in the following link: Transition timing function.

A little more complex transition

The transition property also allows us to create a little more complex transition effect. Let’s say if we want to create transition effects with multiple properties. This can be done by using the following syntax:

transition: property1 duration1 [delay1], property2 duration2 [delay2], ...;

In this case, timing-function should be handle using the transition-timing-function property (if needed). For example:

transition-timing-function: linear;

Let’s write some actual code which implements a little more complex transition. We’re gonna create an expandable box which also has its background-color smoothly change with the transition effect.

HTML code:

CSS code:

Result:

See the Pen Breath by Kei Nart (@codenart) on CodePen.

Our tutorial about Transition Effects has finished. In the next tutorial, we’ll talk about creating Animations.

Next: CSS Animations ;