transition主要就是以下四个属性,后面跟着的是它们的初始值
- transition-property: all;
- transition-duration: 0s;
- transition-timing-function: ease;
- transition-delay: 0s;
当前可进行补间的CSS属性(比MDC上的少,去掉许多私有属性与比较罕见的属性)
属性名 类型
属性名 类型
background-color color
background-image gradients _disibledevent=>#stable { padding: 0.5em 0; border: 1px solid #ccc; border-left: 1em solid green; border-right: 1em solid #006; background-color: #eee; font-size: 12px; width: 600px; } #stable .showbox { margin: 1em; width: 100px; height: 40px; border: 2px solid; border-color: green; background-color: #cfc; line-height: 40px; text-align: center; -webkit-transition-duration: 2s; } #stable:hover .showbox { width: 500px; -border-color: #006; -background-color: #ccf; } default »
linear »
ease-in »
ease-out »
ease-in-out »
cubic-bezier »
但在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/
最新评论