CSS 对动画的支持

CSS3 中内置对动画中的支持，这使得我们不需要使用动画图片、Flash或者Javascript 就可以在页面上实现丰富的动画。

基本定义

让我们先来看一个最简单的例子，我们首先在页面上定义一个矩形

1	<div class="anmi"></div>

并使用如下的CSS：

.anmi {
  width: 100px;
  height: 100px;
  background-color: blue;
}

在浏览器上展示这段代码，将看到一个大小为 100x100 的，蓝色的矩形。当然，现在是不会动的。接下来，我们加入 CSS 动画。

首先，我们在 anmi 选择器中加入如下动画定义，代码如下:

.anmi-1 {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation-name: anmi-css-1;
  animation-duration: 10s;
}

可以看到，我们加入了两个属性，animation-name 定义了动画的名称，这里命名为: anmi-css-1, 另一个参数 animation-duration 定义了该动画执行的时间(为了便于观察代码的执行效果，我们将动画定义的时长定义得比较长: 10s)。那动画到底怎么过”动”呢？

这需要加入一个新的 css 规则: @keyframes, 该规则用来定义动画的不同阶段（状态）。比如我们加入一个简单的 @keyframes。如下:

@keyframes anmi-css-1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

首先，我们为上面的 @keyframes 定义了名称，这个名称应该和在 animation-name 定义的一直（实际上选择器 .anmi-1 就是通过 animation-name 来引用 @keyframes 的）。在 @keyframes 中，我们简单的定义了 from 和 to 两个状态，分别表示动画开始时和动画结束时的 HTML 元素（案例中就是 .anmi-1 选择的 div）的状况。

在浏览器中观察运行结果就可以看到一个淡入的效果了。

对于 @keyframes ，我们也可以使用百分比的方式来定义更多的动画阶段，比如上面案例的 @keyframes 可以定义为

@keyframes anmi-css-1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

当然，也可以增加更多的阶段:

@keyframes anmi-css-1 {
  0% {
    opacity: 0;
  }
  50% {
      background-color: red;
  }
  100% {
    opacity: 1;
  }
}

动画属性

在上面的例子中，我们使用了动画的 animation-name 和 animation-duration 属性。其实动画一些属性，可以提供更多的控制。

animation-delay - 用于延迟动画开始的时间
animation-iteration-count - 用于控制动画执行的次数，infinite 为无限次
animation-direction - 是都反向播放动画，可以提供正向，反向交错的播放效果
animation-fill-mode - 当动画结束时，H5元素的状态
animation-timing-function - 定义动画执行时的速度曲线