CSS3的动画：animation介绍

这篇是关于简单的CSS3-animation介绍，适合小白作为动画了解的入门篇。

为了在项目中使用动画，只需要做两件事：

01
创建动画
02
将其连接到必须设置动画的元素，并指示所需的功能

动画是一组关键帧，它们存储在css中，我们先看一段简单的动画代码段：

@keyframes test-animation {
  0% {
   width: 50px;
  }
  100% {
    width: 150px;
  }
}

让我们整理一下：
关键字“ @keyframes”指示动画本身。
接下来动画的命名，“ test-animation”。
花括号{ }包含关键帧列表。在这种情况下，它是开始帧0％和结束帧100％。同样，开始和结束帧也可以写为关键字“ from ”和“ to”。

采用from…to…改写上面的代码,可以这样写：

@keyframes test-animation {
    from {
      width: 50px;
    }
    30% {
      width: 99px;
    }
    60.8% {
       width: 120px;
    }
    to {
       width: 150px;
    }
}

请注意，如果未指定起始帧（“ from ”，“ 0％”）或结束帧（“ to”，“ 100％”），浏览器将为他们设置动画功能的估算值，就像动画未应用。

将上面动画的代码应用到指定元素是通过两个命令完成的：

element {
animation-name: test-animation;
animation-duration: 2s;
}

规则:
“test-animation”设置创建的动画“ @keyframes”的名称。 “animation-duration”指出动画将持续播放多少秒。可以以秒（3s，65s，.4s）或毫秒（300ms，1000ms）表示。

您可以对关键帧进行分组：

@keyframes animation-name {
  0%, 35% {
   width: 100px;
  }
  100% {
    width:200px;
  }
}

可以为一个元素设置多个的动画，其名称和参数应按设置顺序编写：

element {
    animation-name: animation-1, animation-2;
    animation-duration: 2s, 4s;
 }

更多动画属性如下：

animation-delay：功能可识别播放动画之前的延迟，以秒或毫秒为单位设置：

element {
    animation-name: animation-1;
    animation-duration: 2s;
    animation-delay: 5s; // Before starting this animation, 5 sec will pass.
 }

animation-iteration-count：动画播放次数。我们可以设置0、1、2、3…等中的任何正值，或者设置“infinite”无限次。

element {
   animation-name: animation-1;
   animation-duration: 2s;
   animation-delay: 5s;
   animation-iteration-count: 3; //this animation plays 3 times
 }

animation-fill-mode：可标识元素在动画开始之前和完成之后处于哪种状态。其中，对应属性如下：
animation-fill-mode：forwards：动画完成后，元素状态将对应于最后一帧。
animation-fill-mode：backwards：动画完成后，元素状态将对应于第一帧。
animation-fill-mode：both：动画开始之前，元素状态将与第一帧相对应，而在其完成之后将与最后一个帧相对应。

animation-play-state：动画的启动与暂停。该功能仅使用2个值：“ running ”或“ paused”。

animation-direction ：动画方向。我们可以管理动画播放的方向。它的参数可以取几个值：
animation-direction：normal;动画播放，这是动画的通常方向。
animation-direction：reverse;动画反向播放。
animation-direction: alternate; 让动画也相反的方向进行。
animation-direction: alternate-reverse;动画重播将以正常方向进行，奇数回放将以相反方向进行。

animation-timing-function：动画时间函数，允许设置特殊功能，该功能负责动画重播速度。常用的函数名称有ease, ease-in, ease-out, ease-in-out, linear, step-start, step-end.

这种时间函数可以自己创建：贝塞尔曲线cubic-bezier。

animation-timing-function: cubic-bezier(P1x, P1y, P2x, P2y);

采用四个参数，并基于它们建立动画过程中的值分布曲线。可以在https://cubic-bezier.com/#.17，.67，.68，.83设置函数：

下一篇，我们将讲解transition以及它与animation的关系。
记得翻阅哦~