css3 动画基础

<h1><a href="http://www.rainleaves.com">雨打浮萍</a></h1>

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;
}

<h2>专注于web前端开发</h2>

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;
}

<div class="div">
辛苦遭逢起一经，干戈寥落四周星。山河破碎风飘絮，
身世浮沉雨打萍。惶恐滩头说惶恐，零丁洋里叹零丁。
人生自古谁无死？留取丹心照汗青
</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;
}

.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;
}