什么是 CSS3 中的动画？
动画是使元素从一种样式逐渐变化为另一种样式的效果。
可以改变任意多的样式任意多的次数。
一.使用动画更改颜色背景
例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
@keyframes myfirst
{
0% {background: red;}
20%{background: blue;}
50%{background: purple;}
100% {background: yellow;}
}
.test1{ 300px;
height: 300px;
background: black;
animation: myfirst 6s;
}
</style>
</head>
<body>
<div class="test1">
</div>
</body>
</html>
用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
其中0%代表的是动画的开始，100%是代表动画的完成、结束。
注释：您必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0。
二.改变位置
动画不仅能改变背景色，也可以改变其位置。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
@keyframes myfirst{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
div
{
100px;
height:100px;
background:red;
position:relative;
animation-name:myfirst;
animation-duration:2s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
三.@keyframes 规则和所有动画属性：
@keyframes ：规定动画。
animation ：所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name ：规定 @keyframes 动画的名称。
animation-duration ：规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function ：规定动画的速度曲线。默认是 "ease"。
animation-delay ：规定动画何时开始。默认是 0。
animation-iteration-count ： 规定动画被播放的次数。默认是 1。
animation-direction ： 规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state ：规定动画是否正在运行或暂停。默认是 "running"。
animation-fill-mode ：规定对象动画时间之外的状态。