網頁設計

第 7 章    CSS3 的過渡、轉換、與動畫

∗ 網頁中的動態元素

▸ 過去:全部利用 JavaScript (或 jQuery) 產生動態效果

▸ 目前:CSS3 已有許多產生動態效果的功能,例如滑鼠縈繞,元素在網頁上移動等

∗ HTML5 與 CSS3 範例

3d animation

✶ 將滑鼠移到海報,海報會翻正
3dAnimation

DesignLovr Demo

✶ 將滑鼠移到卡片,卡片會移到最上面
DesignLovrDemo

(1) CSS3的過渡效果

∗ 滑鼠縈繞 (Hover)

▸ 滑鼠移至連結元素時,產生縈繞效果,讓使用者知道可以點選

▸ 滑鼠縈繞有兩個狀態 (State):開或關 (On/Off),而 CSS3 可讓元素在此 2 狀態產生過渡 (Transition) 的視覺效果

∗ 過渡 (Transition)

▸ 有 4 種特性

transition-property:需加上過渡效果的 CSS 屬性名稱 (例如:background-color, text-shadow, 或 all)
transition-duration:過渡的時間 (以秒計,例如 2s, 0.3s)
transition-timing-function:過渡時間中如何改變轉換速度 (例如:linear, ease-in, ease-out, ease-in-out, 或 cubic-bezier)
transition-delay:過渡效果產生前的延遲 (以秒計,例如:0s, 2s)

▸ 以上的過渡時間函數 (transition-timing-function) 如右圖所示

transitionTimingFunction

▸ 例如 (可能需要前綴):

a {
  color: black;
  text-decoration: none;
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: ease;
  transition-delay: 0s;
}
a:hover {
  color: red;
  text-shadow: 2px 2px 2px gray;
  font-size: 300%;
  font-weight: bold;
}

▸ 也可以使用較簡短的寫法 (所有變化,在一秒內過渡,舒緩變化方式,沒有延遲):

a {
  ...
  transition: all 1s ease 0s;
}

▸ 也可以設定同一元素使用不同過渡方式,例如設定字體尺寸、顏色、文字陰影的過渡時間分別為 2 秒、3 秒、及 8 秒:

a {
  color: black;
  text-decoration: none;
  transition-property: font-size, color, text-shadow;
  transition-duration: 2s, 3s, 8s;
}

∗ 練習:

▸ 將 oscar6-3.htmloscar6-3.css 分別另存新檔為 oscar7-1.htmloscar7-1.css,並如下修改:

▸ HTML:

✶ 修改 CSS 連結 <link rel="stylesheet" href="css/oscar7-1.css">
✶ 另加一項 CSS 連結 <link rel="stylesheet" href="css/oscarEffect7-1.css">
✶ 將 #content 裡的電影名稱加上連結
<p>像 
<b><a href="http://www.imdb.com/title/tt0360717/">金剛</a></b>、 
<b><a href="http://www.imdb.com/title/tt0203009/">紅磨坊</a></b>、 
<b><a href="http://www.imdb.com/title/tt0408306/">慕尼黑</a></b> 
等電影都得獎,但真正的電影英雄卻都沒得獎,一點也沒有好萊塢精神,不是嗎?</p>

▸ CSS:

✶ 建立新檔案:oscarEffect7-1.css,儲存至 css 目錄中
✶ 將 #content 裡的連結加上滑鼠縈繞效果:放大字體、顏色變黑、去底線、陰影
div#content a:hover { 
  font-size: 200%; 
  color: black; 
  text-decoration: none; 
  text-shadow: 1px 1px 0 lightgray; 
}
✶ 以上為立即呈現開或關的效果,再加上過渡效果
div#content a:hover {
  ...
  transition: all 1s ease 0s;
}
✶ 回應式設計裡加上過渡效果 (預設 ease、無延遲)
/* Responsive design */
@media screen and (max-width: 1000px) { 
  * { transition: all 2s; }
}
@media screen and (max-width: 800px) { 
  * { transition: all 2s; }
}
@media screen and (max-width: 600px) { 
  * { transition: all 2s; }
}

∗ CSS3 的各種技巧:http://css-tricks.com/

(2) CSS3 的二維轉換

∗ 過渡 (Transition) 定義如何由某個狀態轉到另一個狀態

∗ 轉換 (Transformation) 則定義狀態的內涵

∗ 二維轉換 (2D transformation),有下列轉換方式:

translate:平移,例如向右平移 40px 距離:transform: translate(40px, 0);

scale:縮放,例如縮小一半:transform: scale(0.5);

rotate:旋轉,例如旋轉 90 度:transform: rotate(90deg);

skew:依 x, y 軸歪斜,例如 x 軸與 y 軸分別歪斜 10、2 度:transform: skew(10deg, 2deg);

matrix:可設定轉換陣列,將各種轉換一次完成,例如:transform: matrix(1.678, -0.256, 1.522, 2.333, -51.533, -1.989);

▸ transform-origin:設定轉換的中心點 (預設為元素的中心點),例如:transform-origin: 20% 20%;

▸ 例如,各種二維轉換:

a {
  display: inline-block;
}
a:hover {
  /* Try each of the following one by one: */
  transform: scale(1.7);
  transform: translate(40px, 0);
  transform: rotate(90deg);
  transform: skew(10deg, 2deg);
  transform: matrix(1.678, -0.256, 1.522, 2.333, -51.533, -1.989);
}
✶ 註:設定 display: block; 會有無法預期的錯誤,因為區塊寬度佔滿整個包含元素,轉換變得規模很大

∗ 練習:

▸ 將 oscar7-1.html, oscar7-1.css, 及 oscarEffect7-1.css 分別另存新檔為 oscar7-2.html, oscar7-2.css, 及 oscarEffect7-2.css,並如下修改:

▸ HTML:修改 CSS 連結 <link rel="stylesheet" href="css/oscar7-2.css"> 連及 <link rel="stylesheet" href="css/oscarEffect7-2.css">

▸ 修改 oscar7-2.css:將 nav 裡的 a 連結改為行內區塊顯示 (如此才能做文字以外的效果)

nav ul li a {
  ...
  display: inline-block;
}

▸ 修改 oscarEffect7-2.css:當使用者將滑鼠移至連結時,將字體放大 2 倍、加陰影過渡 1 秒

nav ul li a:hover {
    text-shadow: 2px 2px 2px black; 
    transition: all 1s ease 0s; 
    transform: scale(2);
}

∗ 三維轉換 (3D transformation),有下列轉換方式:

translateX(x)translateY(y)translateZ(z)translate3d(x, y, z):相對 X、Y、或 Z 軸平移

scaleX(x)scaleY(y)scaleZ(z)scale3d(x, y, z):相對 X、Y、或 Z 軸縮放

rotateX(angle)rotateY(angle)rotateZ(angle)rotate3d(x, y, z, angle):相對 X、Y、或 Z 軸旋轉

perspective(n):透視 (Perspective)

matrix3d(n, n, ..., n):設定轉換陣列,將各種轉換一次完成

∗ 練習:

▸ 將 oscar7-2.html, oscar7-2.css, 及 oscarEffect7-2.css 分別另存新檔為 oscar7-3.html, oscar7-3.css, 及 oscarEffect7-3.css,並如下修改:

▸ HTML:製作一個有關電影是否熱賣的測驗:利用電影海報當考題,滑鼠移至時,海報翻轉顯示答案

✶ 修改 CSS 連結:<link rel="stylesheet" href="css/oscar7-3.css"><link rel="stylesheet" href="css/oscarEffect7-3.css">
✶ 刪除 #content 元素內的所有資料
#content 裡加入 3 個 section 元素來置放電影海報與答案
# section 均設為 class="quiz"
# 每個 section 內含一個 <div class="film">
# 每個 div.film 內含 <div class="face"><div class="face back">,前者置放海報影像,後者置放答案,並將影像設定 class="quizImg"
<div id="content">
<h1>小考:熱賣或慘淡?</h1>
<h2>不要聽那些影評人的話,你認為「七寶奇謀」、「慕尼黑」、和「金剛」,哪一部電影的票房是熱賣或慘淡?</h2>
<section class="quiz">
  <div class="film">
    <div class="face"><img class="quizImg" src="img/goonies.png" alt="七寶奇謀"></div>
    <div class="face back"><h2>熱賣!</h2></div>
  </div>
</section>

<section class="quiz">
  <div class="film">
    <div class="face"><img class="quizImg" src="img/munich.png" alt="慕尼黑"></div>
    <div class="face back"><h2>慘淡!</h2></div>
  </div>
</section>

<section class="quiz">
  <div class="film">
    <div class="face"><img class="quizImg" src="img/kingKong.jpg" alt="金剛"></div>
    <div class="face back"><h2>慘淡!</h2></div>
  </div>
</section>
</div>  <!-- end content -->

▸ 修改 oscar7-3.css

✶ 刪除原先 #content 裡的各個元素設定,僅留以下設定
/* Content */ 
div#content { 
  float: right; 
  width: 75%;    /* 720/960 */ 
  margin-top: 5.2083333%;    /* 50/960 */ 
  padding: 2.0833333%;    /* 20/960 */ 
} 
✶ 設定:
# section.quiz 的寬度為 28% (因為有 3 張影像),高度固定 300px,並設定 display: inline-block 以並排影像
# 設定影像尺寸 100% (填滿包含區塊) 及 <h2> 字型
div#content {
  ... 
}
section.quiz {
  width: 28%;
  height: 300px;
  display: inline-block;
  margin-right: 2%;
}
section.quiz img.quizImg { 
  width: 100%; 
  height: 100%; 
}
section.quiz h2 {
  font-size: 3em;
  text-align: center;
  color: red;
}

▸ 修改 oscarEffect7-3.css

✶ 設定 div.film 的轉換及過渡 1 秒
div.film {
  height: 100%; 
  transform-style: preserve-3d;
  transition: 1s;
}
✶ 滑鼠移至海報時,div.film 對 Y 軸旋轉 180 度
section.quiz:hover div.film {
  transform: rotateY(180deg);
}
✶ 設定隱藏海報的背面,並設絕對位置使正反面均在同一位置
div.face {
  width: 100%; 
  height: 100%; 
  position: absolute;
  backface-visibility: hidden;
}
✶ 設定海報翻轉後顯示的內容:長寬設定為和影像相同,一開始就旋轉 180 度 (因此初始頁面會顯示海報)
div.back {
  transform: rotateY(180deg);
  background: #3b3b3b;
  padding: 15%;
}

∗ CSS3 的轉換尚在發展中:http://dev.w3.org/csswg/css-transforms/

(3) CSS3 的動畫

∗ 動畫 (Animation)

▸ 設定元素隨著時間產生變化

∗ 練習:

▸ 將 oscar7-3.html, oscar7-3.css, 及 oscarEffect7-3.css 分別另存新檔為 oscar7-4.html, oscar7-4.css, 及 oscarEffect7-4.css,並如下修改:

▸ HTML:修改 CSS 連結 <link rel=stylesheet href=css/oscar7-4.css><link rel=stylesheet href=css/oscarEffect7-4.css>

▸ 修改 oscarEffect7-4.css

✶ 將「熱賣」或「慘淡」之靜態文字加上動畫
# 宣告一個名為 answerkeyframes 動畫
@keyframes answer {
  0% { text-shadow: 0 0 4px #ffffff; }
  50% { text-shadow: 0 0 60px #ffffff; }
  100% { text-shadow: 0 0 4px #ffffff; }
}
* 0% (一開始):文字陰影為 4px 白色
* 50% (時間進行到一半):文字陰影為 60px
* 100% (最後):文字陰影為 4px
# 加入動畫:變化時間 2 秒,一直持續,淡入
section.quiz h2 {
  animation: answer 2s infinite ease-in;
}
✶ 設定左方四張影像海報在進入網頁時擺動
# 宣告一個名為 swing 的動畫:旋轉 3 度、7 度、10 度、7 度、3 度
@keyframes swing {
  0% { transform: rotate(3deg); }
  20% { transform: rotate(7deg); }
  60% { transform: rotate(10deg); }
  80% { transform: rotate(7deg); }
  100% { transform: rotate(3deg); }
}
# 加入動畫 (變化時間 0.1 秒,持續 10 次):
aside img.poster {
  transform: rotate(3deg);
  animation: swing 0.1s 10;
}

▸ 結果:

animation.png

∗ CSS3 animation範例:

http://webdesignerwall.com/trends/47-amazing-css3-animation-demos

上一章