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}

}