丁宇 | DING Yu

体验CSS Animation

从LDCN那里得知Webkit刚刚发布了支持CSS Animation的nightly版本。

下载下来研究了一会儿，有如下发现：

效果很惊艳！

没错，CSS Animation的效果完全可以用惊艳来形容了，在“落叶”这个例子中，叶子的淡入淡出和旋转非常自然，以至于第一眼看上去，我还以为是Java Applet或者Flash。下面是我录制的视频：

</embed>

在另外一个名为“波动”的例子中，色彩的过渡和长方形的缩放也都极为流畅，如下所示：

</embed>

不过如果你仔细看，不难发现CSS Animation尚不支持抗锯齿（Anti-Aliasing）－在长方形的边缘可以看到轻微的锯齿。

CPU占用率比较高

查看使用了CSS Animation的页面时，CPU占用率由25%左右瞬间提高到50%以上，最高达到60%。如下图：

CPU占用率

这个问题在Webkit的blog上也有人提到了，相信开发人员会逐步优化的。

CSS代码的逐步复杂化

“落叶”效果的部分CSS代码（点击放大）“落叶”效果的部分CSS代码（点击放大）

上图显示了“落叶”效果的部分CSS代码，可以看到比目前稍显复杂的CSS代码。然而如果CSS Animation（也包括CSS Transition）成为主流应用的话，不难想象，以后CSS的代码会逐渐向Flash ActionScript的风格靠拢，甚至演变为一种真正的编程语言。纵观Flash和Javascript最近十年的发展，或许CSS代码的复杂化才刚刚开始。

顺便说一句，以后前端开发这一职业一定会越来越专业化，而走上和程序开发相类似的道路，从职能上出现前端架构师、程序员和测试人员等等；而和用户体验、交互设计相关的角色，则可能会和产品设计师进一步融合－目前的交互设计师以后不会成为一个单独的岗位，一个例证来源于08年的UPA大会上，演讲人Sarah Bloomer做了一个统计，06年的时候有23%的UED部门隶属于产品部门，而到了08年，这一数字上升到50%。

当然，IE8仍然不支持CSS Animation

我觉得这话简直就是废话，我们还能指望MS什么呢？

哦，强制停止IE6的生命吧，这是我对MS唯一的期望。

  1. Question @ 2009-02-17 18:09:43 +0800:

    CSS Animation 和 SMIL SVG,可能是浏览器动画的一个组合.但现在效率上都比较差.

  2. 站站超声波 @ 2009-02-17 19:10:56 +0800:

    IE8其实还是很不错的。

  3. Question @ 2009-02-17 19:14:15 +0800:

    没看出IE8的"好",MS是要把浏览器做成空壳子,里面装Silverlight

  4. 蓝蓝小雪 @ 2009-02-18 05:24:41 +0800:

    恨IE，从娃娃抓起。

    我们班的人只知道IE，唯独我知道别的浏览器。

    Nightly的链接错了，多了一个L

  5. Meteor @ 2009-02-18 18:33:25 +0800:

    最近才开始用Maxthon,最有感觉的是鼠标拖拽右键划一下就回到上一步,很方便的说~

  6. 蓝蓝小雪 @ 2009-02-19 02:43:08 +0800:

    猛然发现我的Chrome 2.0也能看到动画……囧了……

    最近我Chrome都没打开，还是刚刚想试试看Chrome的Webkit核心能不能看到动画……什么时候更新的？好奇怪……

    我不喜欢用鼠标手势……我喜欢用键盘……

  7. yoo @ 2009-02-20 19:44:49 +0800:

    落叶那个例子该怎么看到效果呢，我Safari和Chorme都看不到效果。

  8. UC数码 @ 2009-02-20 22:35:27 +0800:

    Chorme功能也太简单了点。

  9. ehaagwlke @ 2009-02-21 05:06:15 +0800:

    去http://webkit.org下载最新的nightly build,然后让safari使用这个nightly build的webkit核心就可以看到了把.

    webkit还加入了对HTML5的支持.

  10. ehaagwlke @ 2009-02-21 05:06:54 +0800:

    晕,自己也打别字..........

  11. Avant @ 2009-02-24 00:08:39 +0800:

    很有意思，不过作为数据与表现分开下，css还是越简单，越小好。

    话说我以前也是极力推荐firefox，在3次改版官网的时候，没通过firefox，坚决不上线，不过我现在不怎么做页面了，对这个不追求了，毕竟，看我官网的庞大数据里，firefox只占 0.44%，而如果追求兼容性，我就得要求编辑多花20%得精力，实在是无奈啊。

  12. 丁宇 @ 2009-02-24 05:46:43 +0800:

    @Avant “官网”指的是？

  13. Avant @ 2009-02-24 07:16:36 +0800:

    呵呵，游戏官网，the9的

  14. ehaagwlke @ 2009-02-26 05:27:10 +0800:

    http://www.apple.com/safari/welcome/

    safari 4 公测版本已经加入了对css animation的支持了.
    mac os x leopard下,只有safari能看见上面这个url中的内容.

  15. Felix @ 2009-02-27 00:21:59 +0800:

    @ehaagwlke 看到了，这两天网上讨论的很多。另外我在WebKit上也可以看到这个欢迎动画。

  16. clover @ 2010-08-26 01:10:40 +0800:

    何止是IE8 连IE9都不支持
    IE9何止是不支持animation 连transition都不支持

  17. JoJo @ 2010-08-27 01:19:58 +0800:

    经常关注你的网站更新，偶然发现你与我同事生日同一天，并且爱好都很相像。比如都喜欢听“青春”“那一年”....