CSS3帧动画

在前面的文章中也有介绍过css3动画的内容，可见《关于transition和animation》和《webkitAnimationEnd动画事件》，今天又要唠叨一下这个东西了，随着知道的越多，然后就会发现自己还有更多的不知道。

今天主要说的是利用animate制作帧动画。

我们常见的loading效果，很多的动画效果并不是连续运动，而是一种逐帧运动的感觉。

看一个简单的需要制作动画效果的图片：

甚至就包括我们在这里写博客上传图片，等待上传这个过程中的loading动画，明显的效果是不能连续转动，不然总感觉傻傻的，最开始我也做了一个傻傻的连续旋转的动画，不知道怎么上传这种效果，没法只管的演示，我把所有代码全都贴上自己可以观察一下。

<div class="loading"></div>

.loading{
  width: 1.12rem;
  height: 1.12rem;
  position: absolute;
  left: 50%;
  margin-left: -0.56rem;
  top: 35%;
  z-index: 2;
  background: url(../images/loading.png) no-repeat center center;
  background-size: contain;
  -webkit-animation: rorates 4s infinite linear;
  animation: rorates 4s infinite linear;
}
@-webkit-keyframes rorates {
  0% {
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}
@keyframes rorates {
  0% {
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

所引用的图片，就是前面上传的那张，大家可以看一下，连续旋转，真的没有任何的美感可言。这时候，我就想到了逐帧动画的解决方法。

其实，逐帧动画的关键点在于我们常用的控制动画的速度曲线的属性animation-timing-function，该属性我们比较熟悉的值基本上属于一下这些值：

其中三次贝塞尔曲线cubic-bezier(n,n,n,n)，我不知道有多少人能够熟练使用，我是从来没使用过，在我的项目中，前面几种动画曲线已经够用了。

事实上，在这个动画曲线上，还应该有一个值，就是steps(step-start, step-end)函数，他有两个参数，step-start其实就是你指定的步进数量，steps()会根据你指定的步进数量，把整个动画切分为step-start帧，并且整个动画会在帧与帧之间硬切。而step-end用于指定动画在每个周期的什么位置发生帧的切换动作，但实际上并没有多大卵用，或者说就我而言，没发现他有多少实际用处吧！

上面的css动画稍作修改，就能实现我们需要的逐帧动画：

.loading{
  width: 1.12rem;
  height: 1.12rem;
  position: absolute;
  left: 50%;
  margin-left: -0.56rem;
  top: 35%;
  z-index: 2;
  background: url(../images/loading.png) no-repeat center center;
  background-size: contain;
  -webkit-animation: rorates 4s infinite steps(8);
  animation: rorates 4s infinite steps(8);
}
@-webkit-keyframes rorates {
  0% {
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}
@keyframes rorates {
  0% {
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

　　这么再看起来，明显好很多了