闲谈CSS3动画

跟着CSS3越来越热，CSS3动画也逐渐受到各人的存眷。这次有幸修改淘宝网全站掖Ψ，小小地应用了下(详见http://www.taobao.com/下拉箭头处的hover结果)。与其说是渐进加强，不如说是满意了技强人小小的虚荣心。

以下是本身的一点领略，但愿能对各人有所辅佐。

…

从(http://www.w3.org/Style/CSS/current-work)可以看出，CSS动画涉及的常识点包罗 CSS 2D Transformations, CSS 3D Transformations, CSS Transitions, CSS Animations。

Transformation 增补界说了width, height, left, top等之外的一些可用于实现动画的属性，如rotate, scale, skew。
Transition 和 Animation 用于界说动画的进程。个中Transition 可以实现简朴的动画；Animation则可以通过设定多个要害帧实现相对伟大的动画。

…

(数据来自http://caniuse.com/)

可以看到，CSS Animation只有Safari支持，今朝只能本身玩玩；而Transition用来做渐进加强则较为吻合。

…

需求：让一个div元素在鼠标移上去时变大1倍，旋转180度，且配景由红变蓝。

html code::

<div></div>

css code::

div {
    position: absolute;
    left: 100px;
    top: 100px;
    width: 100px;
    height: 100px;
    background: red;

    /* 界说动画的进程 */
    -webkit-transition: -webkit-transform .5s ease-in, background .5s ease-in;
    -moz-transition:    -moz-transform .5s ease-in, background .5s ease-in;
    -o-transition:      -o-transform .5s ease-in, background .5s ease-in;
    transition:         transform .5s ease-in, background .5s ease-in;
}

div:hover {
    /*  界说动画的状态 */
    -webkit-transform: rotate(180deg) scale(2);
    -moz-transform: rotate(180deg) scale(2);
    -o-transform: rotate(180deg) scale(2);
    -transform: rotate(180deg) scale(2);
    background: blue;
}

demo (http://fiddle.jshell.net/NVErB/show/light/) (no IE)

…

这是个令人很是疾苦的题目，由于不得不针对每个赏识器copy一遍一再代码。

值得留意的是无前缀的尺度代码需放在最后。若是几年后某个属性成为尺度，被赏识器默认支持了，这行代码会包围前面的界说，使得赏识器可以优先行使他。

…

需求：让一个div元素在点击后变大1倍，旋转180度，且配景由红变蓝；然后向右移动400px。

源码请查察demo源文件。

demo (http://fiddle.jshell.net/a4r94/show/light/) (Safari, Chrome only)

…

见live demo (http://www.satine.org/research/webkit/snowleopard/snowstack.html) (Mac Safari Only，相同于http://www.cooliris.com/的结果)，没Mac的可以到(http://www.satine.org/archives/2009/07/11/snow-stack-is-here/)看视频演示。

PS: Mac Safari的3D Transform、2D Transform和Opacity等视觉结果都是跑在GPU上的，为此我还专程验证下了Win Safari，公然不支持。

…

webkit blog先容animation/2d transforms/3d transforms的三篇文章
http://webkit.org/blog/138/css-animation/
http://webkit.org/blog/130/css-transforms/
http://webkit.org/blog/386/3d-transforms/

W3组织的CSS类型集
http://www.w3.org/Style/CSS/current-work

苹果官方关于CSS视觉结果的文档
http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Introduction/Introduction.html

css animation的兼容性数据来历
http://caniuse.com/

3d transform的运用app
http://www.satine.org/research/webkit/snowleopard/snowstack.html
http://css-vfx.googlecode.com/svn/trunk/examples/zflow.html
http://www.fofronline.com/experiments/cube-3d/

css3动画的应用
http://www.webdesignerwall.com/trends/47-amazing-css3-animation-demos/
http://www.optimum7.com/internet-marketing/web-development/pure-css3-spiderman-ipad-cartoon-jquery-html5-no-flash.html

css3 animation的入门应用：钟的实现
http://g-zone.org/test/g-clock/index.html

…

完

出处：http://ued.taobao.com/blog/2010/05/05/css3-animation/

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!