如何通过animation创建一个动画？

在css中，创建动画需要3步:

定义动画(通过@keyframes)
将动画应用到具体的类上
指定动画如何运行如

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @keyframes stretch {
      0%{
        width: 0px;
      }
      100%{
        width: 50px;
      }
    }

    .stretchBox{
      animation-name: stretch;
      animation-duration: 1s;
      height: 100px;
      width: 0px;
      background: yellow;
    }
  </style>
</head>
<body>
  <div class="stretchBox"></div>
</body>
</html>

上面代码

通过@keyframes定义了名为stretch的动画，0%和100%分别定义了动画的初始状态和结束状态，他们可以被关键字from和to代替。这里stretch动画将盒子从0px延神至50px
我们通过animation-name属性将stretch动画应用到类.stetchBox上。
通过animation-duration属性指定动画的运行一个周期的时间为1s。

各属性详解

上面介绍了动画的大致用法，接下来让我们了解下具体的属性

animation-name

要应用到类上的动画的名称，如上面的stretch

animation-duration

动画完成一个周期所需的时间。可以用秒（s）或毫秒（ms）指定。值必须是正数或零，单位是必需的。

animation-duration设置为0，动画仍会运行，具体显示情况如下

如果未提供值，则使用默认值 0s，此时动画仍会执行（会触发 animationStart 和 animationEnd事件）。如果 animation-duration 为 0s 时，动画是否可见取决于 animation-fill-mode 的值，如下所述：

如果 animation-fill-mode 设置为 backwards 或者 both，则在animation-delay倒计时期间将显示由 animation-direction 定义的动画的第一帧。
如果 animation-fill-mode 设置为 forwards 或者 both，在 animation-delay 结束后，将显示由 animation-direction 定义的动画的最后一帧。
如果 animation-fill-mode 设置为 none，动画将不会有任何的视觉效果。

animation-delay

属性指定从应用动画到元素开始执行动画之前等待的时间量。

可以用秒（s）或毫秒（ms）指定。单位是必需的。
默认值为 0s，表示动画应立即开始
正值表示动画应在指定的时间量过去后开始。
负值会导致动画立即开始，但是从动画循环的某个时间点开始。例如，如果你将 -1s 作为动画延迟时间，则动画将立即开始，但是将在动画序列的第1秒开始。

animation-direction

设置动画播放的播放顺序/方向，即设置动画是从0% -> 100%方向，或者100% -> 0%方向，或者两者之间反复等。如上面例子，假如在.stretchBox中添加属性animation-direction: reverse。则盒子会先显示100%时的样式，然后在1s内将宽度变成0px。

取值

normal

动画在每个循环中正向播放。换句话说，每次动画循环时，动画将重置为起始状态并重新开始。这是默认值。

reverse

动画在每个循环中反向播放。换句话说，每次动画循环时，动画将重置为结束状态并重新开始。动画步骤将反向执行，并且时间函数也将被反转。例如，ease-in 时间函数变为 ease-out。

-alternate

动画在每个循环中正反交替播放，第一次迭代是正向播放。

alternate-reverse

动画在每个循环中正反交替播放，第一次迭代是反向播放。

animation-fill-mode

该属性设置动画执行前或执行后如何将样式应用到元素上。

取值

none

当动画未执行时，动画将不会将任何样式应用于目标，而是已经赋予给该元素的 CSS 规则来显示该元素。这是默认值。

forwards

目标将保留由执行期间遇到的最后一个关键帧计算值，即元素将保留动画结束后的样式。如上面例子，.stretchBox的默认宽度为0，将动画执行完后，其宽度会回归到0，假如我们想让其动画结束后，保留宽度为50px,则可为类.stretchBox添加属性animation-fill-mode: forwards;

backwards

动画将在应用于目标时立即应用第一个关键帧中定义的值，并在animation-delay期间保留此值。比如上面例子，假如我们想将动画延迟1s播放，并且在这延迟期间给.stretchBox一个10px宽度令其可见。则可

在将0%关键帧中的width由0px变成10px。
为.stretchBox类添加animation-delay: 1s;和 animation-fill-mode: backwards;

both

动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。

animation-iteration-count

设置动画序列在停止前应播放的次数。

取值

infinite

无限循环播放动画。

数值

默认为 1。你可以指定非整数值以播放动画循环的一部分：例如，0.5 将播放动画循环的一半。负值是无效的。

animation-play-state

可以让动画暂停或或者继续播放

取值

running 默认值。当前动画正在运行。
paused 当前动画已被停止

animation-timing-function

设置动画以什么样的速度和加速度进行播放。

取值

ease 默认值。以缓慢的速度开始，然后加速，再以缓慢的速度结束。
ease-in-out。和ease相似，都是缓慢开始和结束，但加速度更快。
ease-in。以缓慢速度开始，然后加速到动画结束。
ease-out。以较快的速度开始，以缓慢的速度结束。
linear。以相同的速度和加速度进行动画的播放。
cubic-bezier()函数。其实ease,ease-in-out等这些关键字，都是在指定cubic-bezier。我们也可以直接指定cubic-bezier函数。cubic-bezier.com可以帮助我们去创建该函数。
step(n, start | end)该函数指定动画在n个停顿点之间完成，每个停顿点的间隔时间相等。第二个参数指默认为end。表示那么最后一个步骤将是在动画结束时出现，而第一个步骤将稍晚出现。假如指定start,意味着第一个步骤会在动画开始时立即出现，而最后一个步骤会在动画结束时出现。可以简单理解为end让第一个停顿稍晚出现。而start则立刻出现。

比如我们有段动画是让球跳动5次，每次跳动1cm。指定为end，球第一次出现的位置为0cm。指定为start，球第一次出现的位置为1cm。

简写

animation属性是所有与动画相关属性的简写，其语法为 animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state

如 animation: rotate 2s ease-in 1s 2 reverse forwards running ;

支持animation的css属性

通过trainstion创建动画

直接给某类添加transition属性也可以为支持动画的css属性添加动画，具体语法如下：

transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];

其中

transition-property指的是想要动画的css属性
transition-duration 指的是动画持续的时间
transition-timing-function 指的是bezier函数，控制动画的速度和加速度
transition-delay 指的是动画的延迟播放时间

有多个需要动画属性，用逗号分割

.element { transition: background 0.2s ease, padding 0.8s linear; }

all 关键字

all关键字为所有支持动画的css属性的简写，表示所有属性都需要应用动画效果

.element { transition: all 0.2s ease }

css 动画animation各种属性详解，以及transition