1 @keyframes规则
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
2 css3 动画
在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
一 规定动画的名称
二 规定动画的时长
div {
width: 200px;
height: 200px;
margin: 100px;
background-color: yellow;
animation: div 5s
}
@keyframes div {
from {background-color: yellow}/*从*/
to {background-color: red}/*到*/
}
运行效果
运行图
页面刷新后事件从初始状态在规定时间内完成事件，后返回初始事件
必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0
3 什么是 CSS3 中的动画
动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成
div {
width: 50px;
height: 50px;
position: relative;
background-color: yellow;
animation: div 5s
}
@keyframes div {
0% {background-color: yellow; left: 0; top: 0}
50% {background-color: red; left: 100px; top: 100px}
100% {background-color: #000; left: 200px; top: 100px}
}
运行效果
左图为初始图（0%） 中图为运行过程图（0%~50%）右图为运行到结束图（50%~100%） 运行结束后事件回归初始值
4 动画属性
@keyframes 规定动画。
animation 所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-functior 规定动画的速度曲线。默认是 "ease"。
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。
animation-fill-mode 规定对象动画时间之外的状态。
div {
width: 50px;
height: 50px;
position: relative;
background-color: yellow;
animation-name: div;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/*以上代码可简写为：
animation: div 1s linear infinite alternate */
}
@keyframes div {
0% {background-color: yellow; left: 0; top: 0}
10% {background-color: red; left: 100px; top: 0}
20% {background-color: #000; left: 100px; top: 100px}
40% {background-color: red; left: 200px; top: 100px}
50% {background-color: #000; left: 200px; top: 200px}
60% {background-color: yellow; left: 300px; top: 300px}
70% {background-color: red; left: 100px; top: 300px}
80% {background-color: red; left: 200px; top: 400px}
90% {background-color: red; left: 0; top: 400px}
100% {background-color: #000; left: 0; top: 0}
}
