首頁 > 開發者 > JavaScript
CSS3提供兩種方式來實現動畫，transition與animation。animation涉及自訂一種為“@keyframes”的東西，這個需要動用到insertRule太複雜了，因此本文跳過它。有人它為transform也算一種，但它是靜態，需要結合transition才能變成動態，因此也跳過。
transition主要就是以下四個屬性,後面跟著的是它們的初始值
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(, , , )
cubic-bezier(0.25, 0.1, 0.25, 1.0).
cubic-bezier(0.0, 0.0, 1.0, 1.0).
cubic-bezier(0.42, 0.0, 1.0, 1.0).
cubic-bezier(0.0, 0.0, 0.58, 1.0).
cubic-bezier(0.42, 0.0, 0.58, 1.0).
這是幾個預設timing-function的樣本：
default »linear »ease-in »ease-out »ease-in-out »cubic-bezier »但在JS操作它們時我們其中只需要transition就行了，由於這是瀏覽器商首先搞出來，因此都帶著它們的首碼，如-ms-,-moz-等等，我們需要把它們改成駝峰風格才能調用，見下面的例子。
樣本1,通過JS來操作這些CSS3屬性實現動畫效果:
<br /><!DOCTYPE html><br /><html><br /> <head><br /> <meta charset="utf-8"><br /> <title>dom Framework</title><br /> <script><br /> var dom = function(s){<br /> return document.getElementById(s)<br /> }<br /> dom.cssName = function (name){<br /> var prefixes = ['', '-ms-','-moz-', '-webkit-', '-khtml-', '-o-'],<br /> rcap = /-([a-z])/g,capfn = function($0,$1){<br /> return $1.toUpperCase();<br /> };<br /> dom.cssName = function(name, target, test){<br /> target = target || document.documentElement.style;<br /> for (var i=0, l=prefixes.length; i < l; i++) {<br /> test = (prefixes[i] + name).replace(rcap,capfn);<br /> if(test in target){<br /> return test;<br /> }<br /> }<br /> return null;<br /> }<br /> return dom.cssName(name);<br /> }<br /> window.onload = function(){<br /> var el = dom("test"),<br /> css3transition = dom.cssName("transition");<br /> el.style[css3transition] = "all 5s ease-in"<br /> dom("start").onclick = function(){<br /> el.style.width = "400px";<br /> }<br /> }</p><p> </script><br /> <style><br /> #test{<br /> background: red;<br /> width:10px;<br /> height:30px;<br /> }<br /> </style><br /> </head><br /> <body><br /> <h3>CSS3 動畫 by 司徒正美</h3><br /> <div id="test"><br /> TEXT<br /> </div><br /> <button id="start" type="button">開始測試</button><br /> </body><br /></html></p><p>
運行代碼
樣本2,同時操作多個屬性的漸層，我們需要用“,”隔開。
</p><p><!DOCTYPE html><br /><html><br /> <head><br /> <meta charset="utf-8"><br /> <title>dom Framework</title></p><p> <script><br /> var dom = function(s){<br /> return document.getElementById(s)<br /> }<br /> dom.cssName = function (name){<br /> var prefixes = ['', '-ms-','-moz-', '-webkit-', '-khtml-', '-o-'],<br /> rcap = /-([a-z])/g,capfn = function($0,$1){<br /> return $1.toUpperCase();<br /> };<br /> dom.cssName = function(name, target, test){<br /> target = target || document.documentElement.style;<br /> for (var i=0, l=prefixes.length; i < l; i++) {<br /> test = (prefixes[i] + name).replace(rcap,capfn);<br /> if(test in target){<br /> return test;<br /> }<br /> }<br /> return null;<br /> }<br /> return dom.cssName(name);<br /> }<br /> window.onload = function(){<br /> var el = dom("test"),<br /> css3transition = dom.cssName("transition");<br /> el.style[css3transition] = "width 5s ease-in,height 4s linear"<br /> dom("start").onclick = function(){<br /> el.style.width = "400px";<br /> el.style.height = "200px"<br /> }<br /> }</p><p> </script><br /> <style><br /> #test{<br /> top:1px;<br /> background: red;<br /> width:10px;<br /> height:30px;<br /> }<br /> </style><br /> </head><br /> <body><br /> <h1>處理多個屬性的漸層 by 司徒正美</h1><br /> <div id="test"><br /> TEXT<br /> </div><br /> <button id="start" type="button">開始測試</button><br /> </body><br /></html><br />
運行代碼
新銳瀏覽器也為此添加了一個事件,當漸層動畫結束時,讓我們清除漸層屬性。不過，這個事件名，非常不規則，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)
支援情況:
相關連結
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/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
