使用CSS动画 | CSS Animations: Using CSS animations

这是一个实验中的功能

此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

CSS animations 使得可以将从一个CSS样式配置转换到另一个CSS样式配置。动画包括两个部分:描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。

相较于传统的脚本实现动画技术，使用CSS动画有三个主要优点：

1. 能够非常容易地创建简单动画，你甚至不需要了解JavaScript就能创建动画。

2. 动画运行效果良好，甚至在低性能的系统上。渲染引擎会使用跳帧或者其他技术以保证动画表现尽可能的流畅。而使用JavaScript实现的动画通常表现不佳（除非经过很好的设计）。

3. 让浏览器控制动画序列，允许浏览器优化性能和效果，如降低位于隐藏选项卡中的动画更新频率。

配置动画

创建动画序列，需要使用animation属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 @keyframes规则实现，具体情况参见使用keyframes定义动画序列小节部分。

animation的子属性有:

animation-delay 设置延时，即从元素加载完成之后到动画序列开始执行的这段时间。

animation-direction 设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。

animation-duration 设置动画一个周期的时长。

animation-iteration-count 设置动画重复次数， 可以指定infinite无限次重复动画

animation-name 指定由@keyframes描述的关键帧名称。

animation-play-state 允许暂停和恢复动画。

animation-timing-function 设置动画速度， 即通过建立加速度曲线，设置动画在关键帧之间是如何变化。animation-fill-mode 指定动画执行前后如何为目标元素应用样式。

使用keyframes定义动画序列

一旦完成动画的时间设置， 接下来就需要定义动画的表现。通过使用@keyframes建立两个或两个以上关键帧来实现。每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。

因为动画的时间设置是通过CSS样式定义的，关键帧使用percentage来指定动画发生的时间点。0%表示动画的第一时刻，100%表示动画的最终时刻。因为这两个时间点十分重要，所以还有特殊的别名：from和to。这两个都是可选的，若from/0%或to/100%未指定，则浏览器使用计算值开始或结束动画。

也可包含额外可选的关键帧，描述动画开始和结束之间的状态。

示例

注意:这里的示例没有在CSS动画属性上使用任何前缀，Webkit内核浏览器或者早期版本浏览器可能需要前缀，下面的实例包含了-webkit-前缀。

文本滑过浏览器窗口

该例中<p>元素由浏览器窗口右边滑至左边

请注意，像这样的动画可能会导致页面变得比浏览器窗口更宽。为了避免这个问题，把元素在容器中动画，并在容器上设置overflow:hidden。

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

在此示例中，<p>元素的样式指定动画从开始到结束执行需要3秒钟的时间，使用该animation-duration属性，并且@keyframes定义动画序列的关键帧的at-rule 的名称被命名为“slidein”。

如果我们希望<p>元素上的任何自定义样式出现在不支持CSS动画的浏览器中，我们也会在这里包含它。但是，在这种情况下，除了动画效果之外，我们不需要任何自定义样式。

关键帧是使用@keyframes规则定义的。在这种情况下，我们只有两个关键帧。第一个出现在0％（使用别名from）。在这里，我们将元素的左边距设置为100％（即，在包含元素的最右边），并且将元素的宽度设置为300％（或者包含元素的宽度的三倍）。这会导致动画的第一帧将标题从浏览器窗口的右边缘拖出。

第二个（也是最后一个）关键帧出现在100％（使用别名to）。左边距设置为0％，元素的宽度设置为100％。这将导致标题完成其对内容区域的左边缘的动画齐平。

<p>The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.</p>

（重新加载页面以查看动画，或单击CodePen按钮在CodePen环境中查看动画）

增加关键帧

让我们给上面的示例中添加一个关键帧，比如标题的字号先变大然后恢复正常，添加这个关键帧十分简单：

75% {
  font-size: 300%;
  margin-left: 25%;
  width: 150%;
}

在动画序列执行到75%的时候，标题元素的左边距为25%，宽度为150%。

（重新加载页面以查看动画，或单击CodePen按钮在CodePen环境中查看动画）

重复动画

animation-iteration-count用以指定动画重复的次数，仅仅使用该属性就能使动画重复播放。在该例中，设该属性为infinite以使动画无限重复

p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
}

来回运动

上面实现了动画的重复播放，但是每次动画开始时总跳回开始位置显得很怪异。我们真正想要的是标题来回滑动，这时只需要设置animation-direction属性为alternate。

p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

使用动画速记

animation简写为节省空间非常有用。作为一个例子，我们通过这篇文章使用的规则是：

p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

可以被替换

p {
  animation: 3s infinite alternate slideIn;
}

注意：您可以在animation参考页面找到更多详细信息：

设置多个动画属性值

CSS动画的longhand值可以接受多个值，用逗号分隔 - 当您想要在单个规则中应用多个动画时，可以使用此功能，并为不同的动画设置不同的持续时间，迭代次数等。我们来看一些简单的例子来解释不同的排列：

在第一个例子中，我们有三个动画名称集，但只有一个持续时间和迭代计数。在本例中，所有三个动画都有相同的持续时间和迭代计数：

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;

在第二个例子中，我们对所有三个属性都设置了三个值。在这种情况下，每个动画都是在每个属性上的相同位置上使用相应的值运行的，例如fadeInOut持续时间为2.5s，迭代次数为2，等等。

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

在这第三种情况下，指定了三个动画，但只有两个持续时间和交互计数。在这种情况下，如果没有足够的值为每个动画提供单独的值，则值会从头到尾循环。因此，例如，fadeInOut的持续时间为2.5s，moveLeft300px的持续时间为5s。现在我们已经到了可用的持续时间值的末尾，所以我们从头开始 - 因此反弹持续时间为2.5秒。迭代计数（以及您指定的任何其他属性值）将以相同的方式分配。

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;

使用动画事件

通过使用动画事件，您可以获得对动画的额外控制--以及关于动画的有用信息。这些事件，由AnimationEvent对象，可用于检测动画何时开始、完成和开始新的迭代。每个事件包括发生的时间以及触发事件的动画名称。

我们将修改滑动文本示例，以便在每个动画事件发生时输出一些信息，这样我们就可以了解它们是如何工作的。

添加CSS

我们从为动画创建CSS开始。这个动画将持续3秒，称为“幻灯片”，重复3次，每次交替方向。在@keyframes，操作宽度和边距，使元素在屏幕上滑动。

.slidein {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: 3;
  animation-direction: alternate;
}

@keyframes slidein {
  from {
    margin-left:100%;
    width:300%
  }
  
  to {
    margin-left:0%;
    width:100%;
  }
}

添加动画事件侦听器

我们使用JavaScript代码监听所有三种可能的动画事件，setup()方法设置事件监听器，当文档第一次加载完成时执行该方法。

var e = document.getElementById("watchme");
e.addEventListener("animationstart", listener, false);
e.addEventListener("animationend", listener, false);
e.addEventListener("animationiteration", listener, false);

e.className = "slidein";

这是相当标准的代码; 你可以在文档中获得详细信息eventTarget.addEventListener()。这段代码所做的最后一件事就是将class元素设置为“滑入”的动画。我们这样做开始动画。

为什么？因为animationstart一旦动画开始就会触发事件，在我们的例子中，这个事件发生在我们的代码运行之前。因此，我们将通过将元素的类设置为在事实之后获得动画的样式来自己开始动画。

接收事件

事件被传递到listener()函数，如下所示。

function listener(e) {
  var l = document.createElement("li");
  switch(e.type) {
    case "animationstart":
      l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
      break;
    case "animationend":
      l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
      break;
    case "animationiteration":
      l.innerHTML = "New loop started at time " + e.elapsedTime;
      break;
  }
  document.getElementById("output").appendChild(l);
}

这个代码也非常简单。它只是查看event.type来确定哪种类型的动画事件发生，然后添加一个适当的注释到<ul>我们用来记录这些事件的（无序列表）。

当所有的说法和完成的输出，看起来像这样：

• 启动：运行时间为0

• 新循环在时间3.01200008392334开始。

• 新循环在时间6.00600004196167开始。

• 结束：运行时间为9.234000205993652

请注意，时间非常接近，但不完全是那些预期的时间，因为时间建立时，动画被配置。还请注意，在动画的最后一次迭代之后，animationiteration事件；相反，animationend事件被发送。

HTML

为了完整起见，下面是显示页面内容的HTML，包括脚本插入接收事件信息的列表：

<h1 id="watchme">Watch me move</h1>
<p>
  This example shows how to use CSS animations to make <code>H1</code>
  elements move across the page.
</p>
<p>
  In addition, we output some text each time an animation event fires,
  so you can see them in action.
</p>
<ul id="output">
</ul>
</body>

另见

• AnimationEvent

• 检测CSS动画支持

• 使用CSS转换