使用 CSS 动画实现 steps()

CSS 动画很热门,并且有很多实验正在进行。动画的一个很酷的新特性是 steps() 选项,它允许你将动画分割成多个步骤,而不是一次性从一个状态过渡到另一个状态。虽然乍一看这似乎适得其反,但你可以用它做很多事情。

制作完美的列表 网站的启发,Lea Verou 创建了一个 纯 CSS3 打字动画

JSFiddle 演示.

然后,这启发了 @simurai 使用 steps() 功能来 创建精灵动画

JS Fiddle 演示.

尤其是后者非常有趣,因为它允许在没有 JavaScript 的情况下进行脚本化动画——还记得你必须在 Photoshop 中重新制作 GIF 动画并在每次客户想要更快或更慢时重新优化它们吗?

目前,steps 仅将动画的完整长度分割开来。如果想要为不同的步骤设置不同的时间,你仍然需要为每个步骤创建关键帧。目前,steps 功能在 Firefox 和 Webkit 中有效。希望其他浏览器也能跟进。

关于 Chris Heilmann

HTML5 和开放网络的布道者。让我们修复它!

更多 Chris Heilmann 的文章……


3 条评论

  1. 样式

    对移动 Web 开发人员来说是个好消息!以及桌面 Web 开发人员制作动画的另一个机会。

    2011 年 9 月 9 日 22:37

  2. simonleung

    为了使你的 CSS 易于阅读,你可以这样做

    keyframes wink {
    from { background-position: 0px; }
    to { background-position: -500px; }
    }
    ….

    ….
    (function(){
    var ss=document.getElementById(‘CSS3’).firstChild;
    var re=/transition|transform|animation|keyframes/g;
    var userAgent=window.navigator.userAgent;
    var prefix=””;
    if (userAgent.indexOf(“Firefox”)>=0) {
    prefix=”-moz-“;
    } else if (userAgent.indexOf(“WebKit”)>=0)
    prefix=”-webkit-“;
    ss.data=ss.data.replace(re,function(s){return prefix+s});
    })();

    2011 年 9 月 11 日 08:23

  3. Gaurav Mishra

    灵感是交叉授粉 -Marian Bantjes
    记住这些话

    2011 年 9 月 12 日 22:17

本文评论已关闭。