Helpful examples of CSS3 Transitions

Let’s start this post explaining what transitions are. Transitions are nothing else than the effect of gradual change in the status of an element over a period of time. When we talk about CSS3 transitions, we are referring to the change of state in the values ​​of their properties. For example, suppose we have a paragraph (p element of an HTML document) whose font color is red, and we want to change the color to it when on hover to blue, but we want to do it gradually over a period of time, for this, we can use transitions.

In this post, I’ll focus on some of the most useful examples, and I won’t get in all the details behind CSS transitions (maybe in another post), to learn all you need to know, you can go to http://www.w3schools.com/css/css3_transitions.asp

FADE IN

COLOR CHANGE

REDUCE AND ENLAREGE

ROTATE ITEMS

CHANGE OF FORM

3D SHADOW

SWING