本文已参与「新人创作礼」活动，一起开启掘金创作之路。

动画

动画和过渡的区别

动画和过渡类似，都是可以实现一些动态的效果；
不同的是过渡需要在某个事件来触发，而动画可以自动触发动态效果；
设置动画效果，必须先要设置一个关键帧（@keyframes），关键帧设置了动画执行每一个步骤。

动画的概念

在IE9及以下不兼容

动画是使元素从一种样式逐渐变化为另一种样式的效果。我们还可以设置不同的样式、时间和次数等。

使用 @keyframes 创建动画，此外还需要把相应的动画名绑定到一个选择器中，否则创建的动画是不会有任何效果的。

语法：

创建动画：@keyframes 动画名称 { }
使用动画：animation: 动画名称时长

上面的动画名称和持续时间必须定义。如果省略时间，动画将无法运行，因为默认值是0。

我们可以使用关键词 from 和 to、百分比来规定动画的变化样式。

 /* 2.使用动画 */
 p {
   animation: 动画名称 1s;
 }
 
 /* 1.创建动画 */
 /* 关键词 from 和 to */
 @keyframes 动画名称{
   /* 动画的起始位置 */
   from {
     /* 操作 */
   }
   /* 动画的结束位置 */
   to {
     /* 操作 */
   }
 }
 
 /* 百分比 */
 @keyframes 动画名称{
   /* 动画的起始位置 */
   0% {
     /* 操作 */
   }
   /* 动画的结束位置 */
   100% {
     /* 操作 */  
   }
 }

动画的连写形式

当然上面的动画是简写形式的，我们也可以使用连写形式。

下面将拆分讲解单个设计动画的属性。

动画名称

animation-name 设置动画的名称。

比如：animation-name: test;

动画执行时间

animation-duration 设置动画的执行时间，也就是动画完成一个周期所花费的时间。

比如：animation-duration: 4s;

动画的速度曲线

animation-timing-function 设置动画以什么方式来完成一个周期。

可以设置的值：

ease：先加速在减速，默认
ease-in：加速
ease-out：减速
ease-in-out：以低速开始和结束
linear：匀速
steps(int,start|end) ：间隔数量 (步长)
- int：间隔数，是一个正整数（大于 0）
- start：可选，动画的第一帧会被立即执行，直接从第二帧开始，然后以第一帧结束
- end：可选，从第一帧开始到正常结束，默认
cubic-bezier(n,n,n,n) ：设置自己想要的值，值可以是从 0 到 1 的数值

动画的延时

animation-delay 设置动画什么时候开始，也就是延迟时间是多久。 (默认是0)

比如：animation-delay: 2s;

动画运行的方向

animation-direction 设置动画运行的方向。

normal ：正常播放动画，默认
reverse：逆序播放动画
alternate：奇数次正常播放动画，偶数次逆序播放动画
alternate-reverse：奇数次逆序播放动画，偶数次正常播放动画

动画执行的次数

animation-iteration-count 设置动画执行的次数。（默认是1）

数值：具体的整数
infinite：无限循环

比如：animation-iteration-count: 1;

动画的执行状态

animation-play-state 设置动画的执行状态

running：执行，默认
paused：暂停

动画执行完毕时的状态

animation-fill-mode 设置动画执行完毕时的状态

none：回到初始位置，默认
forwards：停止结束的位置（第一帧状态）
backwards：动画延时等待时，元素就会处于开始位置（最后一帧状态）
both：结合了forwards 和 backwards

简写

animation: 动画名称动画时长速度曲线延迟时间重复次数动画方向执行完毕时状态（部分先后，除了时间）

 animation: test 2s 2 1s alternate;

兼容问题

-moz-: 支持 Firefox 更早的版本
-webkit-: 支持 Chrome 和 Safari 更早版本
-o-：支持 Opera 更早的版本

 @keyframes myfirst 
     /* 操作 */
 }
 /* Safari 与 Chrome */
 @-webkit-keyframes myfirst {
     /* 操作 */
 }
 
 p {
   animation-name: myfirst;
   animation-duration: 5s;
   animation-timing-function: linear;
   animation-delay: 2s;
   animation-iteration-count: infinite;
   animation-direction: alternate;
   animation-play-state: running;
   /* Safari 与 Chrome: */
   -webkit-animation-name: myfirst;
   -webkit-animation-duration: 5s;
   -webkit-animation-timing-function: linear;
   -webkit-animation-delay: 2s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-direction: alternate;
   -webkit-animation-play-state: running;
 }
 
 p {
   animation: myfirst 5s linear 2s infinite alternate running;
   -webkit-animation: myfirst 5s linear 2s infinite alternate running;
 }

CSS3中的动画知识点整理

动画