通过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上的少,去掉许多私有属性与比较罕见的属性)

属性名	类型
属性名	类型
background-color	color
background-image	gradients only; not implemented in Firefox
background-position	percentage \| length
background-size	percentage \| length
border-color (including sub-properties)	color
border-radius (including sub-properties)	percentage \| length
border-width (including sub-properties)	length
border-spacing	length
bottom	percentage \| length
box-shadow	shadow
color	color
clip	rectangle
font-size	percentage \| length
font-weight	number \| keywords (excluding bolder, lighter)
height	percentage \| length
left	percentage \| length
letter-spacing	length
line-height	number \| percentage \| length
margin (including sub-properties)	length
max-height	percentage \| length
max-width	percentage \| length
min-height	percentage \| length
min-width	percentage \| length
opacity	number
padding (including sub-properties)	length
right	percentage \| length
text-indent	percentage \| length
text-shadow	shadow
top	percentage \| length
-moz-transform-origin	percentage \| length, keywords
-moz-transform	transform-function
vertical-align	percentage \| length, keywords
width	percentage \| length
word-spacing	percentage \| length
z-index	integer

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

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

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的示例：

default »

linear »

ease-in »

ease-out »

ease-in-out »

cubic-bezier »

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>dom Framework</title>
  <script>
      var dom = function(s){
        return document.getElementById(s)
      }
      dom.cssName = function (name){
        var prefixes = ['', '-ms-','-moz-', '-webkit-', '-khtml-', '-o-'],
        rcap = /-([a-z])/g,capfn = function($0,$1){
          return $1.toUpperCase();
        };
        dom.cssName = function(name, target, test){
          target = target || document.documentElement.style;
          for (var i=0, l=prefixes.length; i < l; i++) {
            test = (prefixes[i] + name).replace(rcap,capfn);
            if(test in target){
              return test;
            }
          }
          return null;
        }
        return dom.cssName(name);
      }
      window.onload = function(){
        var el = dom("test"),
        css3transition = dom.cssName("transition");
        el.style[css3transition] = "all 5s ease-in"
        dom("start").onclick = function(){
          el.style.width = "400px";
        }
      }
   
    </script>
    <style>
      #test{
        background: red;
        width:10px;
        height:30px;
      }
    </style>
  </head>
  <body>
    <h3>CSS3 动画 by 司徒正美</h3>
    <div id="test">
      TEXT
    </div>
    <button id="start" type="button">开始测试</button>
  </body>
</html>

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>dom Framework</title>

</script>
    <style>
      #test{
        top:1px;
        background: red;
        width:10px;
        height:30px;
      }
    </style>
  </head>
  <body>
    <h1>处理多个属性的渐变 by 司徒正美</h1>
    <div id="test">
      TEXT
    </div>
    <button id="start" type="button">开始测试</button>
  </body>
</html>

新锐浏览器也为此添加了一个事件,当渐变动画结束时,让我们清除渐变属性。不过，这个事件名，非常不规则，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+

Ruby's Louvre

导航

公告

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