CSS3:2D动画

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

动画的基本使用

1. 先定义动画
   
   举例：

@keyframes move {//此时move为动画名称
            0%{//百分之0，表示刚开始的状态
                transform: translateX(0px);
            }
            100%{//100%表示结束时的状态
                transform: translateX(1000px);
            }
      }

而如果我们要让盒子绕一个顺时针走动动画，则可以添加状态变化关键帧：

2. 调用动画：

div{
            width: 200px;
            height: 200px;
            animation: move 2s infinite;//调用动画名称move，持续时间为2s
}

• animation-delay：规定动画何时开始，默认是0
  注意简写模式中：delay的秒数放在持续时间后面！
• animation-direction：规定一个周期结束时是回到起点还是原路返回（逆向播放）
• animation-fill-mode：规定动画结束后还是否回来，forwards停留在最后的那个位置。backwards回到起始位置
• animation-play-state：规定动画运行还是暂停，常用在用鼠标悬浮让其停止运动（简写方式里不支持animation-play-state）

div:hover{
            animation-play-state: paused;//鼠标悬浮让其停止运动
}