原文 : https://developer.mozilla.org/en/CSS/CSS_transitions
這是一個實驗中的功能
此功能在某些瀏覽器尚在開發中,請參考兼容表格以得到不同瀏覽器用的前輟。
CSS transitions 是 CSS3 specification 草案的一部分,他可以用來調整 CSS animation 變動的速度。舉例來說,倘若你設計了一個 element 會由白轉紅,你可以透過 CSS transitions 來控制轉變的時間及變化曲線。
-moz-transition
, -webkit-transition 及
-o-transition 的程式。
可供調整的 CSS property 清單
CSS transitions 和 CSS animations 中可以用來修改的屬性在 CSS animatable properties 可以看到。這裡頭同時包含了 SVG properties。
CSS transition properties
我們可以透過 transition
property 來控制 CSS transitions。這可有效避免使用過長的參數來控制你的 transitions,這樣亦減少了 debug 的難度。
下列的 sub-properties 可以協助你控制轉場的性質:
-
transition-property
- 定義哪些 CSS properties 會被轉場效果影響。除了這些被你特別指出的 property 名單,其他的轉場一如以往的會在瞬間完成。
-
transition-duration
- 定義轉場所花費的時間。你可以只定義一個時間給所有 property 使用,也可以給定多組不同時間。
-
transition-timing-function
- 設定轉場時所依據的貝茲曲線。
-
transition-delay
- 定義多久之後開始發生轉場。
使用漸變函式 (transition timing function)
漸變函式可用來定義轉場發生的時間曲線。其規範方式是以四個參數的貝茲曲線代表:
CSS transition function manipulator 是一個可以讓你非常容易以視覺化方式了解轉場流程的工具。
除了自行定義之外,尚有幾個已經預先定義好的函式:
- ease, 等同於
cubic-bezier(0.25, 0.1, 0.25, 1.0)
- linear, 等同於
cubic-bezier(0.0, 0.0, 1.0, 1.0)
- ease-in, 等同於
cubic-bezier(0.42, 0, 1.0, 1.0)
- ease-out, 等同於
cubic-bezier(0, 0, 0.58, 1.0)
- ease-in-out, 等同於
cubic-bezier(0.42, 0, 0.58, 1.0)
一個 transition timing effect 範例
我們在這直接用範例來說明。
在看程式碼之前,或許你會想先看看實際的執行效果。請挑個有支援 transitions 的瀏覽器,然後看看這個 (而這裡有這個範例的相關 CSS 程式碼)。
首先,先以 HTML 創建這個範例的主要外殼:
<ul>
<li id="long1">Long, gradual transition...</li>
<li id="fast1">Very fast transition...</li>
<li id="delay1">Long transition with a 2-second delay...</li>
<li id="easeout">Using ease-out timing...</li>
<li id="linear">Using linear timing...</li>
<li id="cubic1">Using cubic-bezier(0.2, 0.4, 0.7, 0.8)...</li>
</ul>
如你所見,每個 item 都有自己的 ID。剩下的部份交由 CSS 來處理。
使用延遲機制
這個範例會在使用者滑鼠移過 element 後兩秒開始四秒的字體大小變化:
#delay1 {
position: relative;
transition-property: font-size;
transition-duration: 4s;
transition-delay: 2s;
font-size: 14px;
}
#delay1:hover {
transition-property: font-size;
transition-duration: 4s;
transition-delay: 2s;
font-size: 36px;
}
使用線性轉場函式 (linear transition timing function)
如果你希望動畫的變動是以線性的速率,那你可以寫成:
transition-timing-function: linear;
此外,還有許多不同的 timing functions 供你選擇,請見 transition-timing-function
。
用貝茲曲線定義 timing function
你可以定義自己想要的 timing function,這要用貝茲曲線 (cubic bezier curve) 的形式定義之:
transition-timing-function: cubic-bezier(0.2, 0.4, 0.7, 0.8);
上例中我們定義了一個以 (0.0, 0.0), (0.2, 0.4), (0.7, 0.8) 和 (1.0, 1.0) 描述的貝茲曲線。
偵測 transition 的完成
在設計上,當 transition 完成時會觸發一個 event。在 Firefox 中,他是 transitionend ; 在
Opera 中,他是 oTransitionEnd ; 而在
WebKit 中,他是 webkitTransitionEnd。請注意相容性的問題(參閱本頁最下方)。
transitionend
event 提供了兩個 properties:
-
propertyName
- 這指出哪個 CSS property 的 transition 已經完成。
-
elapsedTime
-
指出 transition 花費了幾秒。注意,他不受
transition-delay
影響。
在平常使用上,你可以使用 element.addEventListener()
method 來監控:
el.addEventListener("transitionend", updateTransition, true);
當 property value list 之間並不等長時 ... ?
如果某個 property 的 list 長度比其他短時,他將會被重複,直到等長。例如:
div {
transition-property: opacity, left, top, height;
transition-duration: 3s, 5s;
}
他會被瀏覽器解釋成:
div {
transition-property: opacity, left, top, height;
transition-duration: 3s, 5s, 3s, 5s;
}
可以預期地,倘若列出的 value 過多,他會被切斷。例如:
div {
transition-property: opacity, left;
transition-duration: 3s, 5s, 2s, 1s;
}
那麼他等同於:
div {
transition-property: opacity, left;
transition-duration: 3s, 5s;
}
使用 transitions 來強調選單中的選項
一個使用 CSS 的好時機是用來強調目前使用者滑鼠經過的選單位置。使用 transitions 可以使效果變得更吸引人。
在看實際的程式碼之前,你可以先看實際的範例 (當然你的瀏覽器要能支援 transitions)。相關的 CSS 程式在這裡。
我們先用 HTML 構建外殼:
<div class="sidebar">
<p><a class="menuButton" href="home">Home</a></p>
<p><a class="menuButton" href="about">About</a></p>
<p><a class="menuButton" href="contact">Contact Us</a></p>
<p><a class="menuButton" href="links">Links</a></p>
</div>
接著用 CSS 來產生特效:
.menuButton {
position: relative;
transition-property: background-color, color;
transition-duration: 1s;
transition-timing-function: ease-out;
-webkit-transition-property: background-color, color;
-webkit-transition-duration: 1s;
-o-transition-property: background-color, color;
-o-transition-duration: 1s;
text-align: left;
background-color: grey;
left: 5px;
top: 5px;
height: 26px;
color: white;
border-color: black;
font-family: sans-serif;
font-size: 20px;
text-decoration: none;
-moz-box-shadow: 2px 2px 1px black;
padding: 2px 4px;
border: solid 1px black;
}
.menuButton:hover {
position: relative;
transition-property: background-color, color;
transition-duration: 1s;
transition-timing-function: ease-out;
-webkit-transition-property: background-color, color;
-webkit-transition-duration: 1s;
-o-transition-property: background-color, color;
-o-transition-duration: 1s;
background-color:white;
color:black;
-moz-box-shadow: 2px 2px 1px black;
}
這些 CSS 程式使滑鼠滑過時 (在該 element 的 :hover
state) 造成背景及文字顏色的改變。
使用 transitions 來使 JavaScript 運作的更順暢
Transition 是一種很好的工具,他可以幫助你的 JavaScript 執行結果看起來的更為順暢。舉例來說:
<p>Click anywhere to move the ball</p> <div id="foo"></div>
當你使用 JavaScript 可以將 ball 移動到特定位置:
var f = document.getElementById('foo'); document.addEventListener('click', function(ev){ f.style.left = (ev.clientX-25)+'px'; f.style.top = (ev.clientY-25)+'px'; },false);
藉由 CSS,你可以使執行結果更為流暢。我們加入了:
p{ padding-left:60px; } #foo{ border-radius:50px; width:50px; height:50px; background:#c00; position:absolute; top:0; left:0; -moz-transition: all 1s; -webkit-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; }
你可以到 http://jsfiddle.net/RwtHn/5/ 看範例。
使用 transition events 來替 object 製作動畫
這裡讓我們看個例子,一個內含文字的方塊左右來回移動,並且會在兩種顏色之間做轉變:
在我們仔細研究程式碼之前可以先看範例。同樣地,可以到這看其 CSS 的寫法。
HTML 程式碼
搭配上面範例的 HTML 程式碼並不複雜:
<!DOCTYPE html>
<html>
<head>
<title>CSS Transition Demo</title>
<link rel="stylesheet" href="transitions.css" type="text/css">
<script src="transitions.js" type="text/javascript"></script>
</head>
<body onload="runDemo()">
<div class="slideRight">This is a box!</div>
</body>
</html>
這裡唯一要注意的地方是我們用 slideRight 來修飾 "This is a box!"。此外,在這個文件被讀取時,就會觸發 runDemo()
function。
CSS 程式碼
我們使用 slideRight 和 slideLeft 這兩個 CSS class 來建構動畫 (請參閱 transitions.css
)。這裡列出部分:
.slideRight {
position: absolute;
-moz-transition-property: background-color, color, left;
-moz-transition-duration: 5s;
-webkit-transition-property: background-color, color, left;
-webkit-transition-duration: 5s;
-o-transition-property: background-color, color, left;
-o-transition-duration: 5s;
background-color: red;
left: 0%;
color: black;
}
我們再這明確定義了 position property。這是一件必要的事情,不然動畫將不知道如何開始。
transition-property
property 指出哪些 CSS properties 會被包含在動畫效果中。在這個例子中是 background-color
, color
以及 left
。 transition-duration
property 則說明了整個動畫將歷時 5 秒。
為了相容於 WebKit 及 Opera,當中還定了一些以 "-webkit-" 和 "-o-" 起始的 property。
總的來說, "slideRight" class 定義了最左端點時的狀態 (準備向右滑動)。所以你可以看到 left
property 是 0% 。
下面我們定義了 "slideLeft" class,他表示最右端時的狀態 (準備向左滑動):
.slideLeft {
position: absolute;
-moz-transition-property: background-color, color, left;
-moz-transition-duration: 5s;
-webkit-transition-property: background-color, color, left;
-webkit-transition-duration: 5s;
-o-transition-property: background-color, color, left;
-o-transition-duration: 5s;
text-align: center;
background-color: blue;
left: 90%;
color: white;
width: 100px;
height: 100px;
}
JavaScript 程式碼
在定義了左右兩端點的狀態後,現在我們可以準備來描述 animation 了。這可以簡單的透過 JavaScript 達成。
首先定義 runDemo()
function,他將在文件被讀取後立刻執行:
function runDemo() {
var el = updateTransition();
// Set up an event handler to reverse the direction
// when the transition finishes.
el.addEventListener("transitionend", updateTransition, true);
}
他呼叫了 updateTransition()
function (這待會會定義),並且他捕捉了 "transitionend" event,這使我們能夠知道動畫結束了。
updateTransition()
function 內容如下:
function updateTransition() {
var el = document.querySelector("div.slideLeft");
if (el) {
el.className = "slideRight";
} else {
el = document.querySelector("div.slideRight");
el.className = "slideLeft";
}
return el;
}
這裡的機制很簡單,我們找到 "slideLeft" 而後將他改變成 "slideRight",接著動畫便結束。倘若此時並沒有 "slideLeft",就表示已在右端點,於是執行反向動作。
瀏覽器的支援情形
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 1.0 | 4.0 (2) | 10 | 10.5 | 3.2 |
Property | -webkit-transition |
-moz-transition |
-ms-transition |
-o-transition |
-webkit-transition |
Transition ended event | webkitTransitionEnd |
transitionend |
MSTransitionEnd |
oTransitionEnd |
webkitTransitionEnd |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 2.1 | 4.0 (2) | ? | 10 | 3.2 |
更多資訊