</head>
<style>
div{
background-color:#FC0;
/*transition:background-color 1s linear;*/
transition-property: background-color ;//动画执行的颜色
transition-duration:3s;//动画执行的时间
transition-timing-function:linear;//动画执行的方式
}
div:hover{
background-color:#C36;
}
</style>
<body>
<div>文字</div>
</body>
</html>
同时执行多个动画效果
</head>
<style>
div{
background-color:#FC0;
color:#009;
width:100px;
/*同时执行多个动画效果*/
transition：transform 1s linear, color 3s linear,width 3s linear;
}
div:hover{
background-color:#C36;
color:#0F9;
width:200px;
transform:rotate(360deg);
}
</style>
<body>
<div>文字</div>
</body>
</html>
Animations功能的动画
</head>
<style>
div{
background-color:#FC0;
}
@-webkit-keyframes mycolor{
0%{
background-color:#0F0;
}
40%{
background-color:#006;
}
70%{
background-color:#F93;
}
100%{
background-color:#63C;
}
}
div:hover{
-webkit-animation:mycolor 5s linear;
}
</style>
<body>
<div>文字</div>
</body>
</html>