实例动画

step1：改变字体颜色

雨打浮萍

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：改变背景颜色

专注于web前端开发

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