MIS2000Lab.的「HTML5 認證考試，從零開始」#27-- 將使用者介面（UI）變成動畫 ( CSS動畫 )

DAY 27

MIS2000Lab.的「HTML5 認證考試，從零開始」--菜鳥的30天馬拉松系列第 27 篇

MIS2000Lab.的「HTML5 認證考試，從零開始」#27-- 將使用者介面（UI）變成動畫 ( CSS動畫 )

html 網頁設計 css 動畫 ui interface 鐵人賽網頁程式 user html5 css3 transition 使用者介面 html

mis2000lab

2014-10-22 08:11:34

3819 瀏覽

分享至

上一篇文章：MIS2000Lab.的「HTML5 認證考試，從零開始」#26-- 先進圖形 / Canvas API
http://ithelp.ithome.com.tw/question/10160823

===== 透過CSS做轉換、轉場（transition） ====

透過時間進行屬性值的轉換（transition，也有人翻譯成轉場、漸變），可以讓畫面的轉變更平順也更具吸引力。

本節一開始將著重在（傳統）CSS進行轉換上面，後續會介紹CSS3的設定，但兩者用法大致相似。

最簡單的例子就是，當滑鼠經過（hover）一個<div>區域，我們可以動態改變其形狀大小與顏色。

例如下面範例，只要滑鼠指著、經過這個區域就會變換顏色與寬度，如下圖

[img=415,360]http://ithelp.ithome.com.tw/upload/images/20141022/201410220806335446f5095e3e5_resize_600.jpg[/img]

[img=415,216]http://ithelp.ithome.com.tw/upload/images/20141022/201410220806425446f51286d8f_resize_600.jpg[/img]

上圖的transition設定動畫時間為兩秒（transition: width 2s;），單位s為秒、ms毫秒（千分之一秒）。

如果時間拉長並改成五秒，圖形寬度變長的速率會比較慢。

==== transition的設定（CSS3） =====

CSS3定義了下面五種屬性讓您進行CSS動畫轉換，大致跟上一小節類似：

[ul] [li]transition-property，哪些需要做變化，請加入在此。例如：寬度、高度、字體大小、背景顏色。詳見下面範例。[/li] [li]transition-duration，變化時間。對應上面的變化種類，個別設定變化時間。[/li] [li]transition-timing-function，特效的展示速度。共有：linear（線性）、ease（預設值）、ease-in、ease-out與ease-in-out。[/li] [li]transition-delay，特效開始以前的「延遲時間」。靜待幾秒才會開始展示動畫？[/li] [li]transition，縮寫、簡寫的方式，跟上一小節的寫法雷同。[/li][/ul]

<style type=”text/css”>
div {
width: 400px;
height: 60px;
background-color: yellow;
transition-property: width, height, font-size, background-color;
transition-duration: 2s, 2s, 2s, 3750ms;

transition-timing-function: ease-in;
transition-delay: 1s;
/* 滑鼠指到以後，還要等候一秒才開始做動畫效果 */
}
div:hover {
width: 600px;
height: 80px;
font-size: large;
background-color: red
}
</style>

==== 偵測transition的結束 ====

如果動畫效果結束以後，要回應一件事或是一個訊息，該怎麼做啊？......

因此動畫完成之後（觸發transitionend事件），我們必須偵測結束的時機，然後加上我們想做的動作（事情）。

transitionend事件有兩個屬性：

[ul] [li]propertyName屬性，請放置CSS屬性的名稱（在動畫效果完成之後）。例如：width、height與font-size等。[/li] [li]elapsedTime屬性，動畫開始以前，請把動畫時間、延遲時間寫在這裡（單位：秒）。[/li][/ul]

==== 使用CSS進行轉換（Transformation） ====

CSS動畫效果（transformation）可以讓您實踐2D與3D的效果，

您可以做到下圖的各種轉變特效。CSS的transform屬性就是為此而來！您可以透過它作到下圖的各種變化：

[img=415,234]http://ithelp.ithome.com.tw/upload/images/20141023/201410231430095448a07186360_resize_600.jpg[/img]

==== 3D轉換（transformation） ====

CSS3提供了一系列的函式讓您可以使用3D效果，也就是比2D的X、Y軸多出一個Z軸（前後、影像深度）。

主要有三個：translation、scaling、rotation。