animation动画

完成自动播放的动画

（1）编写javascript脚本完成自动播放的动画；
（2）可以使用flash计算完成动画设计；
（3）可以使用某些动画标签，比如marquee；
（4）h5提供了canvas技术（绘图技术），来完成动画的设计；
（5）css3提供了一种animation动画可以完成自动播放持续播放的动画。

动画的概念

动画：快速切换连携的图片而达到的流畅的画面效果。
帧数：一秒钟切换图片的数据，数量越多，画面越流畅，60Hz（每秒钟切换60张图片）。
关键帧：每一页的关键的画面。

关键帧

概念：指盒子状态要发生改变的帧，就是设置需要播放的动画的步骤。一个完整的动画会被拆分为多个步骤，每一个步骤就是一个关键帧。
例子：
（1）盒子向右移动500px 有两个关键帧，开始状态和结束状态；
（2）盒子变圆后向右移动500px 有3个关键帧，开始状态-变圆-右移500px；
css动画中，定义关键帧。

动画的基本使用

先定义关键帧，再通过animation调用关键帧。
步骤：
利用@keyframes属性来定义所有关键帧，给动画设置一个名称。
给要使用的盒子添加animation的相关属性，指定动画的名称和执行时长。

定义关键帧

利用@keyframes属性来定义关键帧，这个属性属于css代码，不需要写在任何选择器中。
语法：

定义关键帧
@keyframes 动画名称 {
from {
       开始状态
       }
 to {
       结束状态
       }
    }
还可以使用百分比定义关键帧，百分比代表整个动画在某个百分比时，是什么状态
0% {
    }
20% {
    }
50% {
     }
100% {
     }
使用关键帧
div {
      animation-name:动画名称；
      animation-duration：执行时长；
      }

关键帧在设置过程中，可以使用百分比，from相当于0%,to相当于100%；
每一帧的时间跟两帧之间的百分比有关系，跨度越大，分配的时间越多，跨度越小，分配的时间越少。
计算公式：关键帧的执行时间=两帧之间的差* 总动画的时间；

动画属性

animation动画属性可以控制动画的速率、次数等等操作；
属性：

animation-name:设置动画的名称，需要配合执行时长一起使用；
animation-duration：设置动画的执行时长，默认值为0s；
animation timing-function：设置动画的执行速率，原理是通过贝塞尔曲线来实现的；
          ease：默认值，以低速开始，然后变快，在结束前变慢；
          linear：匀速；
          ease-in：以低速开始；
          ease-out：以低速结束；
          ease-in-out：以低速开始和结束；
          cubic-bezier（x1，y1）：贝塞尔曲线
animation-delay：设置动画的延迟时间，默认为0s；
animation-itetation-count：设置动画的执行次数，默认动画只能执行一次；
          n：数字，代表次数；
          infinite：无限次；
animmation-direction：设置动画的执行方向；
          normal：默认，正常播放；
          reverse：反向播放动画；
          alternate：奇数次正向播放动画，偶数次反向播放动画；
          alternate-reverse：奇数次反向播放动画，偶数次正向播放动画；
animation-fill-mode：设置第一帧或最后一帧是否作用在元素上；
          forwards：设置最后一帧作用在元素上，保持结束状态；
          backwards：设置第一帧作用在元素上，保持开始状态；
          both：将第一帧和最后一帧都作用在元素上；
animation-play-state：控制动画是否播放；
          running：默认值，播放
          paused：暂停
animation复合属性
animation：name duration timing-function delay iteration-count direction fill-mode；
animation：动画名称 执行时长 执行速率 延迟时长 执行次数 执行方向 是否保持开始或结束状态；