CSS 动画很热门,并且有很多实验正在进行。动画的一个很酷的新特性是 steps() 选项,它允许你将动画分割成多个步骤,而不是一次性从一个状态过渡到另一个状态。虽然乍一看这似乎适得其反,但你可以用它做很多事情。
受 制作完美的列表 网站的启发,Lea Verou 创建了一个 纯 CSS3 打字动画。
然后,这启发了 @simurai 使用 steps() 功能来 创建精灵动画。
尤其是后者非常有趣,因为它允许在没有 JavaScript 的情况下进行脚本化动画——还记得你必须在 Photoshop 中重新制作 GIF 动画并在每次客户想要更快或更慢时重新优化它们吗?
目前,steps 仅将动画的完整长度分割开来。如果想要为不同的步骤设置不同的时间,你仍然需要为每个步骤创建关键帧。目前,steps 功能在 Firefox 和 Webkit 中有效。希望其他浏览器也能跟进。
关于 Chris Heilmann
HTML5 和开放网络的布道者。让我们修复它!
3 条评论