iT邦幫忙

2021 iThome 鐵人賽

DAY 12
0
Modern Web

入門前端技能之旅系列 第 12

Day.12 「來為網頁添加動畫吧!」 —— CSS 動畫(animation)

「來為網頁添加動畫吧!」 —— CSS 動畫(animation)

現在我們會使用具有互動性的簡單漸變效果了,接著要來試著讓網頁能增添更多活力,不需要我們操作,就會自動播放動畫效果。

什麼是 animation?

animation 就如同字面上的意思,動畫賦予了 CSS 更多的可能性,讓畫面可以更加生動活潑,以往要透過 Javascript 才能完成的效果,如今 CSS 也能幫忙分擔一些畫面效果,記住一句話,能使用 CSS 完成效果,就盡量使用 CSS。

CSS animation 起手式

關鍵影格 keyframes

一開始的起手式當然就是先定義一個動畫效果,使用方法為@keyframes <name> { animation_css },有在製作動畫影片的應該對 keyframes(關鍵影格) 這個字非常熟悉,藉由著個語法,來讓瀏覽器運算產生動態畫面,其中<name>可以自定義動畫名稱,{}內為動畫執行過程,執行過程可以用 0%100%,或使用關鍵字 from & to

例如,想讓封面圖的方塊旋轉,可以使用上一章的 transform: rotateY() 依靠 Y 軸為軸心進行旋轉:

@keyframes rotate {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(360deg);
  }
}

套用 CSS animation

animation-name

動畫名稱,注意 這個一定要設置,不然瀏覽器不知道你要套用的動畫名稱是什麼,除非它會通靈,以上面關鍵影格為例animation-name: rotate;

animation-duration

動畫動完一次所需時間,注意 這個也一定要設置,因為預設是 0,不會動的動畫還叫動畫?以上面關鍵影格為例animation-duration: 5s;,需 注意 單位名稱一定要打,s 代表 秒,ms 代表 毫秒。

animation-delay

動畫延遲多久時間開始播放,這個看需求設置,與上面的設定方法雷同。

animation-iteration-count

動畫循環幾次,這個也是看需求設置,預設是 1,執行 1 次的意思。

想要無限循環多次?

想要無限循環多次,可以設定 infinite,以上面關鍵影格為例animation-iteration-count: infinite;

animation-timing-function

動畫加速度的函式,預設是 ease

animation-time-function
animation-time-function Codepen

具有加減速的速度函式

這個動態效果比較流暢

  • ease
  • ease-in
  • ease-out
  • ease-in-out

具有加減速的速度函式圖
圖片來源

線性速度函式

不具有加減速

  • linear 線性,此封面範例就是使用這個 animation-time-function: linear;

線性函式圖
圖片來源

影格速度函式

就像膠片影格一樣,一步一步展示變化過程,int 設置正整數,數字越大越流暢。
第二個參數,start 會忽略第 0 秒的開始動畫,end 會忽略最後一秒的結束動畫

  • steps(int,start/end)

自定義速度函式(貝茲曲線)

這就比較複雜了,由四個參數來設置貝茲曲線,設置的好會像皮球彈跳一樣自然來回,設置不好就會失控

  • cubic-bezier(n,n,n,n)

animation-direction

控制動畫是否反轉播放,預設值為 normal 正常播放

  • normal,正常播放
  • reverse:反轉播放,從 100% 到 0% 反著播。
  • alternate:上面兩個的結合,正反播放輪替,先正後反,如此循環,當播放次數設 1 時,就正常播放
  • alternate-reverse:與 alternate 的相反,變成先反後正,當播放次數設 1 時,就反轉播放

此圖範例為使用 animation-directon: alternate;
此圖範例為使用 animation-direction: alternate;Codepen

簡寫方式

根據上面封面的動畫效果,原本是這樣使用

animation-name: rotate;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-time-function: linear;

可以看到一直反覆的寫 animation- 開頭,而簡寫方式非常簡單

animation: rotate 5s infinite linear;

直接用 animation 就可以設定所有動畫設定了,需注意 動畫名稱時間 是一定要寫的,如果要設置 delay,第一個時間參數會是 持續時間,第二個時間參數會是 延遲時間!

總結

平面動畫寫起來還算簡單,很有成就感,如果要涉及到 3D 層面的話,又會需要多設定一些東西,如同前一篇所講,視角與定位點,會更加抽象,現階段 CSS 已經告個段落了!明天就要進入我們的 Javascript 章節了!

參考資料


上一篇
Day.11 「利用漸變效果,讓網頁不再死板!」 —— CSS Transform & CSS Transition
下一篇
Day.13 「初步學習 Javascript 基礎篇」 —— Javascript 宣告變數 與 基本型別
系列文
入門前端技能之旅30

尚未有邦友留言

立即登入留言