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.