<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/* 在css中，@keyframes规则可以使用来创建动画，创建动画是通过逐步改变从一个CSS样式到另一个CSS样式，在动画过程中，您可以更改CSS样式的设定多次，指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同，0％是开头动画，100％是当动画完成。为了获得最佳的浏览器支持，您应该始终定义为0％和100％的选择器。
@keyframes规则是css3中新增规则，目前主流浏览器都支持该规则（加浏览器对应的前缀），但不兼容IE 9以及更早版本的浏览器 */
div{
background-color: red;
}
@-webkit-keyframes mycolor {
0%{
background-color: red;
}
40%{
background-color: royalblue;
}
70%{
background-color: salmon;
}
100%{
background-color: seagreen;
}
}
/* 鼠标滑过--开始动画 定义，时间，效果*/
div:hover{
-webkit-animation: mycolor 5s linear;
}
</style>
<body>
<div>
实例一动画效果
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
background-color: blueviolet;
transition: background-color 1s linear;
}
div:hover{
background-color: brown;
}
</style>
</head>
<body>
<div>动画背景颜色变换</div>
</body>
</html>