iT邦幫忙

2021 iThome 鐵人賽

DAY 18
0
自我挑戰組

文組視角的初學前端筆記系列 第 18

Day18 用CSS做出動畫效果

還沒學到這個屬性之前,一直以為必須使用到JavaScript,才能讓網頁有動畫的效果,沒想到用CSS也可以做出動畫的效果。只要會運用transition和animation這兩個CSS屬性,就可以產生很多不同的動畫效果了。
因為transition比起animation用法比較好理解,且部分屬性概念有重疊,所以就著重於整理比較容易忘記的animation屬性筆記。

Animation 屬性

animation 屬性是以下幾個屬性的縮寫:

  • animation-name 動畫名稱
  • animation-duration 動畫播放時間
  • animation-delay 動畫延遲播放時間
  • animation-iteration-count 動畫播放次數
  • animation-fill-mode 設定最終停留位置
  • animation-direction 動畫播放方向
  • animation-play-state 動畫播放或暫停狀態
  • animation-timing-function 動畫加速度函式

CSS Animation 語法

animation:name duration | timing-function | delay | iteration-count | direction | fill-mode | play-state;

animation-name 命名時要注意的事

  • animation-name 屬性是用來指定一個或多個@keyframes所使用的動畫名稱,如果沒有設定animation-name,就不會產生出動畫效果。
  • initial 和 None是CSS動畫的保留字,不能使用這兩個字作為動畫名稱。
div {
  animation-name: move;
}

相關資料: 4.2. The animation-name property


animation-duration 動畫播放時間設定

animation-duration 指的是「播放一次」動畫需要的時間,單位為 秒 ( s ) 或毫秒 ( ms ),預設值 0s,如果沒有設定或將其設為 0s,就不會播放動畫,基本上和 animation-name 動畫名稱都是屬於一定要有的屬性。

div {
  animation-duration: 5s;
}

animation-delay 動畫延遲播放時間

設定動畫開始之後延遲的時間
比較少會使用到,通常用在設定了有很多動畫效果的時候
例如:
動畫在兩秒後才會開始執行

animation-delay: 2s;

如果延遲播放時間是負數,例如 -1s、-2s,效果會從延遲變成快轉,假設動畫播放時間是設定 5 秒,animation-delay 設定為 -2s,動畫就會從第二秒開始播放,播放三秒後結束。


animation-iteration-count 動畫播放次數

預設是 1,也可以設定成infinite(無限次執行)。
但如果設定成infinite,會建議設置在比較小的區塊,避免吃效能

例如:

設定動畫只會播放兩次

div {
  animation-iteration-count: 2;
}

animation-fill-mode 設定動畫最終停留位置

  • animation-fill-mode: none; 預設值,不論動畫播放次數,結束後一律返回原始狀態。
  • animation-fill-mode: forwards; 停留在最後的一個位置
  • animation-fill-mode: backwards; 停留在起始位置
  • animation-fill-mode: both; 此設定值會依照動畫播放次數或是播放方向,停留在起始位置或最後位置

animation-direction 動畫播放方向

animation-direction 屬性定義動畫是正常播放、倒轉播放或是其它方式

  • normal:正常播放
  • reverse:倒轉播放
  • alternate:正反轉輪流播放,如果動畫播放次數是預設就只會正常播放。
  • alternate-reverse:alternate 的相反

例如:
設定先正常播放,後倒轉播放

div {
  animation-direction: alternate;
}

animation-play-state 動畫播放或暫停狀態

  • animation-play-state:running; 預設值,表示動畫正常執行。可搭配滑鼠 hover 的效果使用
  • animation-play-state:paused; 設定動畫暫停。

animation-timing-function 設定動畫播放的速度曲線

  • animation-timing-function:ease; 預設是ease 從慢到快 最後會是慢速結束
  • animation-timing-function:ease-in; 從慢到快
  • animation-timing-function:ease-out; 從快到慢
  • `animation-timing-function: linear; 從開始到結束速度都一致
    ...其它設定值可以參考 CSS animation-timing-function Property

製作動畫必備的@keyframes(關鍵影格)

animation屬性會搭配@keyframes一起使用來產生動畫效果

例如:

範例一

div{
width:100px; 
height:50px; 
background-color: red; 
animation-name: example; 
animation-duration: 3s; 
position:relative; 

@keyframes example {
  from{ 
  background-color: red;  left:0px; top:0px; 
  }
  to {
  background-color: blue; left:0px; top:0px; 
  }
}

範例二

.element {
  animation: pulse 5s infinite;
}

@keyframes pulse {
  0% {
    background-color: #001F3F;
  }
  100% {
    background-color: #FF4136;
  }
}

@keyframes 語法

@keyframes animationName {
  keyframes-selector {
    /* css-styles */
  }
}

用from / 0% 表示動畫的起始,to / 100% 表示動畫的結束


好用的動畫套件

參考資料:
完整解析 CSS 動畫 ( CSS Animation ), 理解animation-fill-mode属性, Day27:小事之 Transition 與 Animation

以上為個人學習筆記整理
若有錯誤,歡迎指正


上一篇
Day17 CSS Media Query
下一篇
Day19 CSS Transform
系列文
文組視角的初學前端筆記30

尚未有邦友留言

立即登入留言