網頁設計

第 6 章    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;
}

▸ 練習:將 oscar5-3.htmloscar5-3.css 分別另存新檔為 oscar6-1.htmloscar6-1.css,並如下修改:

✶ HTML:
# 修改 CSS 連結 <link rel="stylesheet" href="css/oscar6-1.css">
# 另加一項 CSS 連結 <link rel="stylesheet" href="css/oscarEffect6-1.css">
# 將 #content 裡的電影名稱加上連結
<p>像 
<b><a href="http://www.imdb.com/title/tt0360717/" target="_blank">金剛</a></b>、 
<b><a href="http://www.imdb.com/title/tt0203009/" target="_blank">紅磨坊</a></b>、 
<b><a href="http://www.imdb.com/title/tt0408306/" target="_blank">慕尼黑</a></b> 
等電影都得獎,但真正的電影英雄卻都沒得獎,一點也沒有好萊塢精神,不是嗎?</p>
✶ CSS:建立新檔案
oscarEffect6-1.css
div#content a:hover { 
  font-size: 200%; 
  color: black; 
  text-decoration: none; 
  text-shadow: 1px 1px 0 lightgray;
  transition: all 1s ease 0s;
}
# 將 #content 裡的連結加上滑鼠縈繞效果:放大字體、顏色變黑、去底線、陰影, 最後加上過渡效果

oscar6-1.css
/* Responsive design */
/* At 1000px */
@media screen and (min-width: 1000px) {
  ...

  * {
    transition: all 2s;
  }
}

@media screen and (max-width: 1000px) {
  ...

  * {
    transition: all 2s;
  }
}

/* At 800px */
@media screen and (max-width: 800px) { 
  ...
  
  * {
    transition: all 2s;
  }
}

/* At 600px */
@media screen and (max-width: 600px) { 
  ...
  
  * {
    transition: all 2s;
  }
}
# 回應式設計裡加上過渡效果 (預設 ease、無延遲)
測試:在各種視域尺寸觀察頁面變化

∗ 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);
}
✶ 註:如果設定 <a> 元素為 display: block; 會有無法預期的錯誤,因為區塊寬度佔滿整個包含元素, 轉換規模過大

∗ 練習:

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

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

▸ 修改 oscar6-2.css:將 nav 裡的 a 連結改為行內區塊顯示

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

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

nav 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):設定轉換陣列,將各種轉換一次完成

∗ 練習:

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

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

✶ 修改 CSS 連結:<link rel="stylesheet" href="css/oscar6-3.css"><link rel="stylesheet" href="css/oscarEffect6-3.css">
✶ 在 #content 最後加入 3 個 section 元素來置放電影海報與答案
# section 均設為 class="quiz"
# 每個 section 內含一個 <div class="film">
# 每個 div.film 內含 <div class="face"><div class="face back">,前者置放海報影像,後者置放答案,並將影像設定 class="quizImg"
...

<div id="content">
...
<div style="clear:both"></div>

<h1>小考:熱賣或慘淡?</h1>
<h2>不要聽那些影評人的話,你認為「七寶奇謀」、「慕尼黑」、和「金剛」,哪一部電影的票房是熱賣或慘淡?</h2>
<br>
<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 -->

...

▸ 修改 oscar6-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;
}

div#content h1 {
  ...
}

...

▸ 修改 oscarEffect6-3.css

...

nav li a:hover {
  ...
}

div.film {
  height: 100%; 
  transform-style: preserve-3d;
  transition: 1s;
}

section.quiz:hover div.film {
  transform: rotateY(180deg);
}

div.face {
  width: 100%; 
  height: 100%; 
  position: absolute;
  backface-visibility: hidden;
}

div.back {
  transform: rotateY(180deg);
  background: #3b3b3b;
  padding: 15%;
}
✶ 設定 div.film 的轉換及過渡 1 秒
✶ 滑鼠移至海報時,div.film 對 Y 軸旋轉 180 度
✶ 正面長寬均 100%,設絕對位置使正反面均在同一位置,且設定當元素不面向螢幕時不要顯示 (因此初始頁面不會顯示票房)
✶ 設定海報翻轉後顯示的內容:一開始就旋轉 180 度,(因此初始頁面會顯示海報)

(3) CSS3 的動畫

∗ 動畫 (Animation)

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

∗ 練習:

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

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

▸ 修改 oscarEffect6-4.css

✶ 為「票房」加上動畫
...

div.back {
  ...
}

@keyframes answer {
  0% { text-shadow: 0 0 4px #ffffff; }
  50% { text-shadow: 0 0 60px #ffffff; }
  100% { text-shadow: 0 0 4px #ffffff; }
}

section.quiz h2 {
  animation: answer 2s infinite ease-in;
}
# 宣告一個名為 answerkeyframes 動畫,並設定「票房」(section.quiz h2) 動畫,時間 2 秒,持續,淡入
* 0% (一開始):文字陰影為 4px 白色
* 50% (時間進行到一半):文字陰影為 60px
* 100% (最後):文字陰影為 4px
✶ 設定左方四張影像海報在進入網頁時擺動
...

section.quiz h2 {
  ...
}

@keyframes swing {
  0% { transform: rotate(3deg); }
  20% { transform: rotate(7deg); }
  60% { transform: rotate(10deg); }
  80% { transform: rotate(7deg); }
  100% { transform: rotate(3deg); }
}

aside img.poster {
  transform: rotate(3deg);
  animation: swing 0.1s 10;
}
# 宣告一個名為 swing 的動畫:旋轉 3 度、7 度、10 度、7 度、3 度, 然後設定左方海報動畫,時間 0.1 秒,持續 10 次

▸ 結果:

animation1   animation2

∗ CSS3 animation 範例:

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