CSS3 Animation Basics

Instance animations

Step1: Changing font Color

H1 A{color: #03c; text-decoration:none;-webkit-transition:color. 5s Ease-in-out;-moz-transition:color. 5s Ease-in-out ;-o-transition:color. 5s Ease-in-out;transition:color. 5s Ease-in-out;} H1 A:hover{color: #f60;}
Step2: Changing the background color
H2:hover{-webkit-transition:background-color 0.5s Linear;-moz-transition:background-color 0.5s linear;-o- Transition:background-color 0.5s linear;transition:background-color 0.5s linear;background-color: #ccc;}
Step3: Converting multiple properties
function transition for multiple attribute conversions:
<div class= "div" > Hard to be encountered once, sword lonely around the star. The mountains and rivers broken wind drifting, the life of rain playing ping. Fear beachhead said fear, 0 Ding Yang sigh 0 ding. Who has not died in life since ancient times? Stay Loyalty </div>
. div {padding:5px;color: #fff; Background-color: #666;-webkit-transition:color 1s ease-in-out, background-color 0.5s Ease-in-out;-moz-transition:color 1s ease-in-out, background-color 0.5s ease-in-out;-o-transition:color 1s Ease-in-out, background-color 0.5s ease-in-out;transition:color 1s ease-in-out, background-color 0.5s ease-in-out;}. div:hover {color: #333; Background-color: #ccc;}
There is another way to get the gradient effect:
. div {-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out; Transition:all 1s ease-in-out;}
CSS3 Animation Basics