iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 27
1

CSS3 中有兩個用來做動畫的屬性,一個是 Transition,另一個是 Animation

差異比較

CSS3 差異
Transition 在給定的持續時間內平滑地更改屬性值(從一個值到另一個值),也就是只需指定開始與結束的參數,參數改變時就觸發動畫。
. 常用於滑鼠事件(:hover、:active、:focus、click)或鍵盤輸入時觸發
. 需要事件觸發,無法在網頁加載時自動發生。是一次性的,不能重複發生,除非一再觸發。
. 只能定義開始狀態和結束狀態,不能定義中間狀態
Animation 可以自行撰寫動畫 開始、進行間、結束時各階段的變化,適合用來做較細微的動畫表現。需要明確的指定關鍵影格(@keyframes)的參數。
. 網頁加載時會直接執行,可以自行控制各階段動畫的變化
animations 和 transitions 最大的不同在於,tansitions 是當參數改變時觸發,而 animations 則是直接就執行,所以動畫效果需要明確的指定關鍵影格的參數。
CSS3 簡寫順序
Transition [property 名稱] [duration 時間] [timing-function 特效] [delay 延遲]
Animation [name 名稱] [duration 時間] [timing-function 特效] [delay 延遲]
. [iteration-count 次數] [direction 方向] [fill-mode 填充模式] [play-state 播放狀態]

瀏覽器支援

Transition 寫法

.box {
  width: 100px;
  height: 100px;
  background: purple;
  transition: width 2s ease-out 2s;
}

.box:hover {
  width: 200px;
  height: 200px;
  background: red;

}

Transition 的寫法相對 Animation 是比較簡單的

Animation 寫法

div{ 
    animation: change 5s ;//八個屬性中至少要有名稱、時間
}

//設定開始與結束狀態
@keyframes change{
    from{ background: #4BC0C8;}
    to{ background: #C779D0;}
}
from 就是0%,to 為100%。
div{ 
    animation: change 5s ;
}

//設定多個狀態,可以非常詳細
@keyframes change{
    0%{ background: #4BC0C8;}
    20%{ background: #C779D0;}
    60%{ background: #FEAC5E;}
    80%{ background: #185a9d;}
    100%{ background: #4BC0C8;}
}
屬性
animation-name 名稱 就是keyframes後面命名的那個名稱
animation-duration 時間 time 以秒計算,如 3sinitial 預設值inherit 繼承父層
animation-timing-function 特效 linear 等速、 ease、ease-in、ease-out、ease-in-out、step-start、step-end、steps(int,start|end)、cubic-bezier(n,n,n,n) 可上官網取值使用
animation-delay 延遲 以秒計算,如 2s
animation-iteration-count 次數 number 預設值為1,因此填2時,動畫跑的次數為1+2=3次infinite 無限循環
animation-direction 方向 normal、reverse反向、alternate先正後反、alternate-reverse先反後正
animation-fill-mode forwards 使用關鍵影格最後的值backwards 使用最一開始的值both
animation-play-state 播放狀態 paused 暫停running 為預設值initial 預設值、inherit 繼承父層

Animate.css

由於 Animation 的寫法相對複雜,因此有人將許多效果整理成一支 CSS檔,只要會引用與使用,就可以很輕易的在想要做動畫的地方加入想要的動畫效果。

下載處:Animate.css
Github:Animate.css 使用說明

使用方式:
1.在 裡面連結 animate.css

<head>
	<meta charset="UTF-8">
	<title>Animate.css </title>
	<link rel="stylesheet" href="css/animate.css">
</head>

2.在想進行動畫的元素上加上class,一定要先加 animated 再加上要使用的動畫名稱(注意大小寫),如果想要動畫一直動作可以加上 infinite

<body>
	<h1 class="animated fadeIn">我是LOGO</h1>
   <h2 class="animated infinite jello">INFINITE</h2>
</body>

就是這麼簡單~快去試試唄~連 CodePen 上面都有支援喲!

以上是今天的 Transition 與 Animation 介紹。各位看倌明天見囉~

[1] CSS Transitions
[2] CSS Animations


上一篇
Day26:小事之 多重背景與漸層背景 CSS3 Gradients
下一篇
Day28:小事之 jQuery 選擇器
系列文
前端路上那些重要與不重要的小事30

1 則留言

0
陳董 Don
iT邦新手 5 級 ‧ 2018-01-15 22:19:34

快過關了!!!!!!!!

我要留言

立即登入留言