CSS 动画

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第16天，点击查看活动详情 CSS 动画可以在不借助 Javascript 的情况下做出一些简单的动画效果。

你也可以通过 Javascript 控制 CSS 动画，使用少量的代码，就能让动画表现更加出色。

CSS 过渡（transition）[#css-transition]

CSS 过渡的理念非常简单，我们只需要定义某一个属性以及如何动态地表现其变化。当属性变化时，浏览器将会绘制出相应的过渡动画。

也就是说：我们只需要改变某个属性，然后所有流畅的动画都由浏览器生成。

举个例子，以下 CSS 会为 backgroud-color 的变化生成一个 3 秒的过渡动画：

.animated {
  transition-property: background-color;
  transition-duration: 3s;
}

现在，只要一个元素拥有名为 .animated 的类，那么任何背景颜色的变化都会被渲染为 3 秒钟的动画。

单击以下按钮以演示动画：

<button id="color">Click me</button>

<style>
  #color {
    transition-property: background-color;
    transition-duration: 3s;
  }
</style>

<script>
  color.onclick = function() {
    this.style.backgroundColor = 'red';
  };
</script>

CSS 提供了四个属性来描述一个过渡：

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

之后我们会详细介绍它们，目前我们需要知道，我们可以在 transition 中以 property duration timing-function delay 的顺序一次性定义它们，并且可以同时为多个属性设置过渡动画。

请看以下例子，点击按钮生成 color 和 font-size 的过渡动画：

<button id="growing">Click me</button>

<style>
#growing {
transition: font-size 3s, color 2s;
}
</style>

<script>
growing.onclick = function() {
  this.style.fontSize = '36px';
  this.style.color = 'red';
};
</script>

现在让我们一个一个展开看这些属性。

transition-property

在 transition-property 中我们可以列举要设置动画的所有属性，如：left、margin-left、height 和 color。

不是所有的 CSS 属性都可以使用过渡动画，但是它们中的大多数都是可以的。all 表示应用在所有属性上。

transition-duration

transition-duration 允许我们指定动画持续的时间。时间的格式参照 CSS 时间格式：单位为秒 s 或者毫秒 ms。

transition-delay

transition-delay 允许我们设定动画开始前的延迟时间。例如，对于 transition-delay: 1s，动画将会在属性变化发生 1 秒后开始渲染。

你也可以提供一个负值。那么动画将会从整个过渡的中间时刻开始渲染。例如，对于 transition-duration: 2s，同时把 delay 设置为 -1s，那么这个动画将会持续 1 秒钟，并且从正中间开始渲染。

这里演示了数字从 0 到 9 的动画，使用了 CSS translate 方法：

结果

script.js

style.css

index.html

如下在 tranform 属性上应用动画：

#stripe.animate {
  transform: translate(-90%);
  transition-property: transform;
  transition-duration: 9s;
}

在以上的例子中，JavaScript 把 .animate 类添加到了元素上，由此触发了动画：

stripe.classList.add('animate');

我们也可以『从中间』开始，也就是说从某个特定数字开始，比方说，从当前的时间的秒数开始。这就要用到负的 transition-delay。