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 播放狀態] |
.box {
width: 100px;
height: 100px;
background: purple;
transition: width 2s ease-out 2s;
}
.box:hover {
width: 200px;
height: 200px;
background: red;
}
Transition 的寫法相對 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` |
| 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 繼承父層 |
由於 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>
以上是今天的 Transition 與 Animation 介紹。各位看倌明天見囉～
[1] CSS Transitions
[2] CSS Animations
最近在前端網頁上卡關了，沒有持續po文，看到Transition 與 Animation讓我小試一下，發現超愛這樣的動態效果。搜尋到你的文章分享覺得太棒了。喜歡。
持續關注你收入你的文章發表~~
謝謝你的稱讚～也很開心寫的東西有幫助到你
iThome鐵人賽
看影片追技術