In this article, we will talk about CSS animation, including transition property, duration, timing function, and how can we do a series of transitions in one line.

What CSS transition do basically is to transit an element from one state to another all right in a certain way over a set amount of time.

Project file

First, we set up a simple index.html and styles.css file.

Transition property, duration, and timing function

We specify to take transition effect on height, the duration is 0.3s, the transition timing function is ease-in, which is slow in the beginning but fast at the end.

transition-property:all

Now under the .box:hover, we add the width:200px and border-radius:50%. We can see the animation is still the same. The width does increase but the animation effect does not apply to the width property.

A series of transitions

We can do a series of transition as follow

#css-animation #css #css-transition #css3