CCS3过渡与动画

介绍两种CSS3动画中的调速函数

需求1.小球落地的回弹效果：

@keyframes bounce {
60%, 80%, to { transform: translateY(350px); }
70% { transform: translateY(250px); }
90% { transform: translateY(300px); }
}
.ball {
/* 尺寸样式、颜色样式等 */
animation: bounce 3s;
}
很简单是么？然而在执行后发现，这种动画效果很不真实，原因是CSS3过渡与动画的默认调速曲线是ease，曲线图是这个样子，起点（0，0），终点（1，1）：

默认调速曲线

可以看到，在时间轴50%的时候，动画已经完成了80%。
其余的调速曲线选项：

调速曲线

可以看到ease-out正好是ease-in的反向版本，这正是我们需要的回弹效果，只需要在小球回弹的时候指定反向的调速即可：
@keyframes bounce {
60%, 80%, to {
transform: translateY(400px);
animation-timing-function: ease-out;
}
70% { transform: translateY(300px); }
90% { transform: translateY(360px); } }
.ball {
/* 其余样式写在这里 */
animation: bounce 3s ease-in;
}
现在看上去是不是更逼真了？不过，这5种调速曲线显然不够用，如果可以自定义调速曲线，是不是可以实现更真实的效果呢？例如，这个小球回弹的效果模拟自由落体，那么它下落时需要一个更高的加速度。
cubic-bezier(x1,y1,x2,y2)，css提供了这个调速函数供我们自定义调速曲线。参数是3阶贝塞尔曲线的两个控制点，ease调速曲线的两个控制点是这个样子：cubic-bezier(.25, .1, .25, 1)

ease调速曲线

理论上只需要把水平和垂直坐标互换位置就可以得到反向调速函数，我们可以很容易得到ease的反向调速: cubic-bezier(.1, .25, 1, .25),这样回弹效果我们就可以使用ease了：
@keyframes bounce {
60%, 80%,to {
transform: translateY(400px);
animation-timing-function: ease;
}
70% { transform: translateY(300px); }
90% { transform: translateY(360px); }
}
.ball {
/* 外观样式 */
animation: bounce 3s cubic-bezier(.1, .25, 1, .25);
}
虽然更真实了，但仍与自由落体效果差别很大。要实现更真实的小球回弹效果，我们需要借助一些在线工具来调整cubic-bezier的调速曲线，这里不再赘述了。

---

接下来介绍另一种步进函数steps():

需求分析：我们要实现如下图的loading动画。

loading动画帧

动画从起始帧到结束帧不断循环，拿到需求，前端同学第一反应就是js脚本控制位移来完成。我想说，其实CSS3动画完全可以实现，让我们试一下，开始我们的代码可能是这样的：
@keyframes loader {
to { background-position: -800px 0; }
}
.loader {
width: 100px;
height: 100px;
background: url(img/loader.png) 0 0;
animation: loader 1s infinite linear;
/* 把文本隐藏起来 */
text-indent: 200%;
white-space: nowrap;
overflow: hidden;
}
动画在1s内完成，背景位置由0到-800px循环。执行后会发现，并没有达到loading动画的效果，因为我们的需求是需要一帧帧的现实出背景，也就是说每一帧的位移是-100px。这里就要请出steps()步进函数， steps()会将整个动画分割成指定的帧数，动画过程在每一帧中切换 ，让我们稍稍修改一下代码：
animation: loader 1s infinite steps(8);
大功告成！
steps()步进函数还可以实现‘闪烁动画’、‘打字动画’，有兴趣的同学可以尝试。