Page 239 - css揭秘

量，把整个动画切分为多帧，而且整个动画会在帧与帧之间硬切，不会做任
何插值处理。通常，这种硬切效果是我们极力避免的，因此我们很少听到关
于 steps() 的讨论。在 CSS 调速函数的世界里，基于贝塞尔曲线的调速函
数就像是处处受人追捧的白天鹅，而 steps() 则是旁人避之唯恐不及的丑小
鸭。不过，在这个案例中，后者却是我们通向成功的关键。一旦把整个动画
的代码修改为下面的形式，这个加载提示就瞬间变成我们想要的样子了：

animation: loader 1s infinite steps(8);

别忘了 steps() 还接受可选的第二个参数，其值可以是 start 或 end
（默认值）。这个参数用于指定动画在每个循环周期的什么位置发生帧的切换
动作（关于默认值 end 的行为，参见图 8-17），但实际上这个参数用得并不
多。如果我们只需要一个单步切换效果，还可以使用 step-start 和 step-
end 这样的简写属性，它们分别等同于 steps(1, start) 和 steps(1, end)。

试一试 play.csssecrets.io/frame-by-frame

向 Simurai（http://simurai.com/）脱帽致敬，感谢他在“用 steps()
实现拼合图片的动画效果”（http://simurai.com/blog/2012/12/03/step-animation）
这篇文章中提出了这个实用的技巧。
致 敬

„ CSS 动画
http://w3.org/TR/css-animations 相关规范

208 第 8 章 过渡与动画

඀ࠡ JOEC