Page 236 - css揭秘

试一试 play.csssecrets.io/elastic

„ CSS 过渡
http://w3.org/TR/css-transitions 相关规范

„ CSS 动画
http://w3.org/TR/css-animations

43 逐帧动画

背景知识

基本的 CSS 动画，“缓动效果”

难题

在很多时候，我们需要一个很难（或不可能）只通过某些 CSS 属性的
过渡来实现的动画。比如一段卡通影片，或是一个复杂的进度指示框。在这
种场景下，基于图片的逐帧动画才是完美的选择；不过想在网页中以一种灵
活的方式来实现这种动画，可谓是一项惊人的挑战。
看到这里，你可能会产生这样一种疑问：“难道不能用 GIF 动画吗？”
对大多数情况来说，答案是“能”，GIF 动画可以完美胜任。但是，GIF 动 图 8-13
画也有一些短板，在某些场景下可能会让整体效果大打折扣。 半透明的加载提示（来自 dabblet.
com 网站）；这个效果用 GIF 动画
„ GIF 图片的所能使用的颜色数量被限制在 256 色。 是无法实现的

43 逐帧动画 205

඀ࠡ JOEC