css3 动画基础

实例动画

step1：改变字体颜色

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

step2：改变背景颜色

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

step3：转换多个属性

作用transition进行多个属性转换：

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