通过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:动画延迟多久开始.
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 1 and P 2 points of the curve as (x 1, y 1, x 2, y 2). 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/