iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 12
2
自我挑戰組

前端之 " wow~原來是這樣啊 "系列 第 12

Day12 講講 CSS3 動畫 - Transitions

在網頁中設定動畫效果,可以吸引使用者目光到特定區域,也可以與使用者間有更好的互動關係,以提升使用者經驗。

在 CSS3 當中有兩個主要用來實現動畫的方式,分別爲 Transition 及 Animation,在本篇文章中先講講 Transition。

Transition 屬性設定(參考:MDN):

  1. transition-property:定義哪些 CSS properties 會被轉場效果影響
  2. transition-duration:定義轉場所需花費的時間
  3. transition-timing-function:設定轉場時所依據的貝茲曲線
  4. transition-delay:定義多久之後開始發生轉場

適合成爲 transition-property 的對象:

適合實施動畫的對象,必須有過程變化,例如 widthwidth 可以從 100px 放大到 200px,之間是有數值可以逐漸放大的,有過程的,可以以此類推 font-sizeleftright 等,因此 transform 也常被拿來設定爲 transition 動畫對象。

那什麼是沒有過程變化,不適合作爲 transition-property 的對象呢?例如:displaydisplay: block 變成 display: inline-block,它是一個直接狀態的變化,並沒有任何過程,可以以此類推 positionfont-family 等,他們並不適合被當做動畫對象。

設定轉場時所依據的貝茲曲線

一般預設中我們可以看到以下六個效果(參考w3cschool)

  1. ease:默認值,效果爲開始時緩速執行,中間快速,結束再緩速執行
  2. linear:效果爲開始到結束維持等速,呈現線性變化
  3. ease-in:效果爲開始時以緩速執行
  4. ease-out:效果爲結束時以緩速執行
  5. ease-in-out:效果爲開始及結束以緩速執行
  6. cubic-bezier(n,n,n,n):允許自訂貝茲曲線

前五項都可以轉換爲貝茲曲線呈現方式。

Transition 小試身手:

接著我們簡單的設定一個基本的方塊,當它 hover 的時候,利用 transition 設定一些簡單的位移動畫效果:
HTML:

<div class="box"></div>

CSS:

.box{
 width: 100px;
 height: 100px;
 background-color: pink;
 transition: transform 1s linear;
}
.box:hover{
 transform: translate(100px,100px);
}

transition: transform 1s linear; 這行程式碼指的是在 transform 這個屬性加上動畫,動畫持續時間爲 1 秒,呈現過程方式爲等速線性。將它放在原本的CSS中,表示一有 transform 屬性我就要執行動畫,什麼時候會有 transform 屬性呢?就是當 hover 發生時,接著我們看看效果:

try

這裡發生了什麼事情呢?當我的滑鼠 hover 在粉色色塊時,執行動畫效果,但我在原位置小小移動了一下,被偵測到目前並不是 hover 狀態,於是粉色色塊又移回來了,當它移回來的時候又產生 hover 狀態,於是一切變得有些奇怪,並不是我們想要的狀況。

這裏少了一個控制項,來掌控粉色色塊的移動,那麼我們加上一個綠色小圓鈕來控制它,並把動畫該由綠色小圓鈕 hover 時觸發。

HTML:

<div class="control"></div>

CSS:

.control{
 width: 20px;
 height: 20px;
 background-color: green;
 border-radius: 50%;
 margin-bottom: 20px;
}
.control:hover ~ .box{
 transform: translate(100px,100px);
}

看看效果:

try2

以上是最基本的方式實作方式。以下 demo 幾個不同的 transition-timing-function

try3

還有一個自定義貝茲曲線 cubic-bezier(n,n,n,n),我們不必理解深難的計算方式,我們可以利用 google 提供的檢查工具,手動控制出我們要的參數,如畫面中藍色區域,找出我們設定動畫的地方,接著點選紅色圈圈處,打開貝茲曲線設定框,手動拉取紫色原點,可以看見不同效果,可以自己嘗試看看,調整到喜歡的動畫效果,再將參數複製到你的程式碼就可以了。

https://ithelp.ithome.com.tw/upload/images/20181027/20111959k2tKV9AszX.png

以上是今天關於 transition 的基本解說,試試看吧。
明天我們再試試其他漂亮的實作。

/images/emoticon/emoticon29.gif


上一篇
Day 11 CSS position之想去哪就去哪
下一篇
Day13 CSS3 動畫 Transitions實作練習(上)
系列文
前端之 " wow~原來是這樣啊 "30

尚未有邦友留言

立即登入留言