轉場

Internet Explorer 10 與使用 JavaScript 的 Windows 市集應用程式支援階層式樣式表層級 3 (CSS3) 轉場。轉場可讓您在指定的時段流暢地變更階層式樣式表 (CSS) 屬性值,建立簡單的動畫。 例如,您可以在 10 秒的期間內變更物件的大小和色彩。之前您需要使用複雜的 CSS 與 JavaScript 組合,現在只要 CSS 就可以完成了。CSS3 轉場效果由全球資訊網協會 (W3C) 定義於 CSS 轉場效果模組層級 3 規格中,目前仍是工作草稿階段。

附註  本主題先前說明的屬性與事件必須使用 Microsoft 特有的廠商首碼 "-ms-" 才能夠和 Internet Explorer 10 與使用 JavaScript 的 Windows 市集應用程式搭配使用。雖然現已不再需要使用這個首碼,但仍可辨識該首碼。為了確保未來的相容性,請適時更新使用 Microsoft 廠商首碼之轉場屬性的應用程式。

本主題提供組成 CSS3 轉場的屬性概觀,並顯示簡單的轉場範例。

如需可以套用轉場的 CSS 屬性清單,請參閱動畫和轉場屬性

transition-property 屬性

您使用 transition-property 屬性來指定要套用轉場效果的一或多個 CSS 屬性 (當指新屬性值時)。

屬性說明

transition-property

指出指定新的屬性值時,要套用轉場效果的一或多個 CSS 屬性名稱。transition-property 屬性可以設成逗號分隔的 CSS 屬性清單,也可以設成下列其中一個值:

  • none  指定新屬性值時不套用任何轉場效果。所有轉場屬性都會被忽略。
  • all  這是預設值。指定新的屬性值時,每個支援轉場的屬性都會套用轉場效果。

 

除了將轉場套用到定位、色彩、字型等的基本 CSS 屬性外,您還可以將轉場套用到全新支援的 CSS 屬性,像是 opacityborder-radius,以及套用到 2D 與 3D 轉換。

請注意,中斷轉場時會自動回復為舊值。

transition-duration 屬性

transition-duration 屬性定義轉場所需的時間長度。

屬性說明

transition-duration

指定一或多個時間值 (以逗號分隔),每個值指定從舊值轉換到新值所需的時間長度。每個值都是浮點數形式,之後是時間單位指示元 (ms 或 s)。

 

transition-timing-function 屬性

transition-timing-function 屬性可藉由描述如何計算轉換時要使用的中繼值,來改變轉場期間的速度。指定以三次貝茲曲線為基礎的動畫計時函式即可進行這項指定,該函式需要四個參數。

您可以使用 cubic-bezier 函式來明確指定曲線 (手動輸入四個值),也可以從多個函式關鍵字中選擇,每個關鍵字都會對應到常用的計時函式。

屬性說明

transition-timing-function

指定一或多個逗點分隔的計時函式,定義轉場期間要在一組對應的物件屬性中使用的中繼屬性值。 可能的值如下。請參閱 transition-timing-function 參考網頁,了解每個函式的說明。

  • cubic-bezier(x1,y1,x2,y2)  這個函式的四個參數必須是介於 0 與 1 (含) 之間的浮點數值。這些值對應至三次貝茲曲線 P1 與 P2 點的 xy 座標。針對 opacitycolor 以外的屬性,cubic-bezier 曲線函式接受超出 0 到 1 標準範圍的 y 座標。這樣可以建立 "elastic" 或 "bounce" 轉場效果。
  • ease  這是預設值。這個計時函式會從開始時慢慢加速,以全速產生動畫效果,然後在結束時慢慢減速。
  • linear  這個計時函式的速度從開始到結束是相同的。
  • ease-in  這個計時函式會從開始時慢慢加速。
  • ease-out  這個計時函式會在結束時慢慢減速。
  • ease-in-out  這個計時函式會從開始時慢慢加速,然後在結束時慢慢減速。
  • steps  這個計時函式定義一個步階計時函式 (需要兩個參數)。第一個參數指定間隔數目,而第二個選擇性參數會指定屬性值在間隔中改變的時間點。第二個參數預設會限制為開始值或結束值。

 

transition-delay 屬性

transition-delay 屬性可讓您延遲轉場的開始時間,或者讓轉場看起來像已經進行中。如果 transition-delay 屬性為負值,轉場將會在套用時立即執行,但會看起來像是已經從指定的偏移處或在其播放週期內開始執行。

屬性說明

transition-delay

根據對應的物件屬性,指定開始在轉場內進行轉換之前要等待的一或多個偏移值,並以逗號分隔 (從轉場開始算起的時間量)。每個值都是浮點數形式,之後是時間單位指示元 (ms 或 s)。

 

transition 屬性

transition 速記屬性將上述四個轉場屬性組合成一個單一屬性。

屬性說明

transition

根據對應的物件屬性,指定一或多組以空格區隔的轉場屬性。轉場屬性值必須依下列順序設定:

如果您有多組以四個轉場屬性為一組的屬性,您必須使用逗號分隔每一組。

 

範例

您可以瀏覽 IE Test Drive 上的實機操作:轉場效果,來查看 CSS3 轉場效果的執行方式。

下列簡單範例顯示如何使用 CSS3 轉場,來改變一段時間內套用到 div 元素的一個 CSS 屬性。

首先,我們要建立含有一些文字的 div 元素,然後再對它套用一些樣式:


<!DOCTYPE html>
<html lang="en-us">

<head>
<style type="text/css">
body {
  padding: 10px;
  font: bold 20pt "Segoe UI";
}
div {
  width: 250px;
  background-color: lime;
  padding: 10px;
}
</style>
</head>

<body>

<div>
  Duis ac leo sit amet lectus tristique pulvinar nec rutrum dolor.
  Etiam sed ipsum enim, vitae euismod odio. Suspendisse eu.</div>

</body>

</html>


檢視這個頁面。

現在,我們要在使用者按一下並按住 (或觸碰並按住)div時,藉由改變 opacity 屬性來讓 div 慢慢消失。首先,我們要設定不透明度屬性的「之前」和「之後」值。我們從將 div 的不透明度值設為 "1" 開始,而當 div 為「作用中」時則為 "0"。若要完成這個作業,我們需要新增不透明度屬性,現在樣式區段如下所示:


...
<style type="text/css">
body {
  padding:10px;
  font:bold 20pt "Segoe UI"; 
}
div {
  width:250px; 
  background-color:lime;
  padding:10px;
  opacity:1;
}
div:active {
  opacity:0;
}
</style>
...


現在,當您按一下並按住 (或按住不放) 綠色 div 時,它將立即消失,而且消失時間和您按一下滑鼠 (或以手指按下) 的時間長度一樣。檢視這個頁面。

現在我們新增 CSS 轉場屬性,來逐漸降低不透明度。首先,我們要使用 transition-property 屬性來識別要轉場的屬性:


transition-property: opacity;

接著,我們要使用 transition-duration 屬性來新增轉場的持續時間:


transition-duration: 5s;

現在,讓我們使用 transition-timing-function 屬性定義要使用的計時函式。為了讓 div 轉場的時間一致,我們要使用線性計時函式:


transition-timing-function: linear;

我們也可以使用 transition-delay 屬性,將轉場延遲 1 秒鐘:


transition-delay: 1s;

這四個參數會讓 opacity 屬性在 1 秒鐘後產生 5 秒鐘的轉場。您還可以使用轉場速記屬性組合這四個屬性:


transition: opacity 5s linear 1s;

檢視這個頁面。

若要轉換一個元素的多個屬性,請將轉場屬性設成多個值,並以逗號分隔。例如,我們可以在上述範例中加入色彩變化。首先,將 background-color 屬性新增到 div :active 選取器。接著,將 transition 屬性變更如下:


transition: opacity 5s linear 1s, background-color 2s ease;

這個屬性使用 ease 計時函式,將色彩轉換為紫色 2 秒。由於沒有延遲值,因此轉場立即開始。檢視這個頁面。

轉場 DOM 事件

Internet Explorer 10 與使用 JavaScript 的 Windows 市集應用程式定義兩個轉場事件:

transitionstart

transitionstart 事件會在轉場開始時發生。

transitionend

transitionend 事件會在轉場完成時發生。如果轉場在完成前已被移除,將不會啟動此事件。

這個範例會將轉場套用至 <div> 元素,並會觸發 transitionstarttransitionend 事件,以變更方塊中的文字。在線上嘗試範例


<!DOCTYPE html>
<html>

<head>
<title>CSS Transitions Event Example</title>
<style media="screen" type="text/css">
#animatedDiv {
    opacity: 0.5;
    background-color: #D2D2D2;
    color: black;
  width:100px;
  height:100px;
}
#animatedDiv:hover {
    opacity: 1;
    background-color: #F472D0;
    transform: rotate(45deg) translateX(200px);
    transition: all 5s linear 1s;
}
  #Figure {
  border: solid 1px black;
  }
</style>
</head>

<body>

<h1 id="DemoTitle">CSS transition events example</h1>
  <p>Hover your mouse over the inner box</p>
<div class="FigureContainer Bordered">
    <div id="Figure" style="width: 330px; height: 300px;">
        <div id="animatedDiv" aria-haspopup="true">
            Transitioned Element</div>
    </div>
</div>

    <script>
      var divObj = document.getElementById("animatedDiv");
      divObj.addEventListener("transitionstart", function () {
        this.innerHTML = "This is a transition start event";
      }, false);
      divObj.addEventListener("transitionend", function () {
        this.innerHTML = "This is a transition end event";
      }, false);

    </script>

</body>

</html>


API 參考

Transitions

範例和教學課程

如何使用 CSS 轉換、轉場和動畫讓網頁變得更生動

Internet Explorer Test Drive 示範

實機操作:轉場
IE10 中的 CSS3 3D 轉換
使用 CSS 轉換和動畫讓頁面變得更生動

IEBlog 文章

使用 CSS 產生全頁動畫
使用 CSS3 轉場和動畫增加特質

規格

CSS 轉場

相關主題

使用 CSS3 轉場設計美觀生動的應用程式

 

 

顯示:
© 2014 Microsoft