Page 238 - css揭秘

text-indent: 200%;
white-space: nowrap;
overflow: hidden;
}

目前它的效果如图 8-15 所示：第一帧显示出来了，但还没有动画效
果。如果我们尝试对它应用各种不同的 background-position 值，就会发
现 -100px 0 会让它显示出第二帧，-200px 0 会显示第三帧，以此类推。于
是我们的第一反应就是用下面的方法来让它动起来：

@keyframes loader {
to { background-position: -800px 0; }
}

.loader {
width: 100px; height: 100px;
background: url(img/loader.png) 0 0;
animation: loader 1s infinite linear;

/* 把文本隐藏起来 */ 图 8-15
text-indent: 200%;
white-space: nowrap; 加载提示的第一帧显示出来了，
overflow: hidden; 但还没有动画效果
}

但是，在下面这几幅静态截图（动画每经历 167ms 时的情形）中，你
会发现这样其实是行不通的（参见图 8-16）。

图 8-16
实现逐帧动画的首次尝试失败了，
因为我们并不需要帧与帧之间的
过渡状态

我们似乎走错了路，但其实已经相当接近真正的答案了。这里的秘诀是
采用 steps() 这个调速函数，而不是基于贝塞尔曲线的调速函数。
你可能会问：“采用什么调速函数？！”就像我们在前一节所看到的，
所有基于贝塞尔曲线的调速函数都会在关键帧之间进行插值运算，从而产生
平滑的过渡效果。这个特性很棒，因为在通常情况下，平滑的过渡确实是我 动画进度
们使用 CSS 过渡和动画的原因。但在眼前的场景下，这种平滑特性恰恰毁
时间
掉了我们想实现的逐帧动画效果。
图 8-17
与贝塞尔曲线调速函数迥然不同的是，steps() 会根据你指定的步进数 对比 steps(8)、linear 以及默认
的 ease 这三种调整函数的差异

43 逐帧动画 207

඀ࠡ JOEC