通过javascript操作CSS3属性实现动画

CSS3提供两种方式来实现动画，transition与animation。animation涉及自定义一种为“@keyframes”的东西，这个需要动用到insertRule太复杂了，因此本文跳过它。有人它为transform也算一种，但它是静态的，需要结合transition才能变成动态，因此也跳过。

transition主要就是以下四个属性,后面跟着的是它们的初始值

• transition-property: all;
• transition-duration: 0s;
• transition-timing-function: ease;
• transition-delay: 0s;

transition-property的值可以为none,all,或指定上的属性名

当前可进行补间的CSS属性(比MDC上的少,去掉许多私有属性与比较罕见的属性)

transition-duration,动画的持续时间,其值为一个带单位的数值,单位可以为s与ms

transition-delay:动画延迟多久开始.

transition-timing-function:缓动公式,值为ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )

ease

This keyword sets the easing function to cubic-bezier(0.25, 0.1, 0.25, 1.0).

linear

This keyword sets the easing function to cubic-bezier(0.0, 0.0, 1.0, 1.0).

ease-in

This keyword sets the easing function to cubic-bezier(0.42, 0.0, 1.0, 1.0).

ease-out

This keyword sets the easing function to cubic-bezier(0.0, 0.0, 0.58, 1.0).

ease-in-out

This keyword sets the easing function to cubic-bezier(0.42, 0.0, 0.58, 1.0).

cubic-bezier

Specifies a cubic bezier curve to use as the easing function. The four number values specify the P₁ and P₂ points of the curve as (x₁, y₁, x₂, y₂). All values must be in the range [0.0, 1.0] inclusive.

这是几个默认timing-function的示例：

但在JS操作它们时我们其中只需要transition就行了，由于这是浏览器商首先搞出来，因此都带着它们的前缀，如-ms-,-moz-等等，我们需要把它们改成驼峰风格才能调用，见下面的例子。

示例1,通过JS来操作这些CSS3属性实现动画效果:

运行代码

示例2,同时操作多个属性的渐变，我们需要用“,”隔开。

运行代码

新锐浏览器也为此添加了一个事件,当渐变动画结束时,让我们清除渐变属性。不过，这个事件名，非常不规则，webkit系是webkitTransitionEnd，opera是oTransition，FF竟然是transitionend！它们与CSS属性那个大写开头的驼峰风格是不一样的（如WebkitTransition,OTransition,MozTransition）

            var transitionEnd = (navigator.vendor && "webkitTransitionEnd") || ( window.opera && "oTransitionEnd") || "transitionend"; 
            el.addEventListener(transitionEnd,function(){//IE10 pp3将会支持transition与transform
                        //http://blogs.msdn.com/b/ie/archive/2011/04/12/native-html5-first-ie10-platform-preview-available-for-download.aspx
                 this.style.removeProperty(css3transition.replace( rupper, "-$1" ).toLowerCase());//css3transition即WebkitTransition等
            },true)

支持情况:

• firefox 4.0
• chrome 4.0+
• safari 3.1+
• opera 10.5+

相关链接

http://www.the-art-of-web.com/css/css-animation/

http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/

http://www.opera.com/docs/specs/presto23/css/transitions/