CSS3的動畫效果可以藉由CSS的 keyframe 參數來控制動畫的 期間、重覆及重覆的模式例如重覆次數、起始延遲、暫時停止。
瀏覽器支援
animation 屬性目前在 IE 10+ 以上主流瀏覽器都可以執行，但採用 Webkit 引擎的瀏覽器必須加上 -webkit- 前綴字串。
IE 10+ 的主流瀏覽器都已經支援 transition
資料來源：
PJCHENder愛分享 – [筆記] CSS動畫Animation — @keyframes
openfoundry – CSS3 動畫基礎
[新手前端]CSS3動畫效果 transition, animation
[nextpage title=”1-css-animation @keyframes”]
縮寫
animation: name duration timing-function delay iteration-count direction;
animation:{
[<動畫名> || <動畫期間> || <動畫特效> || <動畫延遲> || <動畫次數> || <動畫方向>] ,
[<動畫名> || <動畫期間> || <動畫特效> || <動畫延遲> || <動畫次數> || <動畫方向>]
}
1-1-基礎範例
- 裡面會包含要執行動畫的名稱 animation-nam 和執行動畫的時間 animation-duration，這兩個部分都可以根據自己的需要設定。
- 設定@keyframes的內容，在 @keyframes 後面要先輸入剛剛在div當中所寫的animation-name，然後就可以在”{ }”內設定要執行動畫的效果。
- 用from和to，表示在4s的期間內，從一開始(0%)到最後(100%)動畫的變化。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | div{ width: 100px; height: 100px; background-color: #a561ff; animation-name:example; animation-duration:4s; position: relative; } @-webkit-keyframes example { from { background-color: #a561ff; left: 0px; top: 0px; } to { background-color: #fd72ad; left: 0px; top: 0px; } } @-o-keyframes example { from { background-color: #a561ff; left: 0px; top: 0px; } to { background-color: #fd72ad; left: 0px; top: 0px; } } @-moz-keyframes example { from { background-color: #a561ff; left: 0px; top: 0px; } to { background-color: #fd72ad; left: 0px; top: 0px; } } @keyframes example { from { background-color: #a561ff; left: 0px; top: 0px; } to { background-color: #fd72ad; left: 0px; top: 0px; } } |
See the Pen CSS動畫Animation-1 by Jimmy_Wu (@Jimmy_Wu) on CodePen.
1-2-使用百分比
動畫中間是有很多不同時間點的變化，可以不用from和to，而是直接使用百分比
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | div{ width: 100px; height: 100px; background-color: #a561ff; position: relative; animation-name:example; animation-duration:4s; animation-iteration-count: infinite; } @-webkit-keyframes example { 0%{ background-color: #a561ff; left: 0px; top: 0px; } 25%{ background-color: #fd72ad; left: 100px; top: 0px; } 50%{ background-color: #3498db; left: 100px; top: 100px; } 75%{ background-color: #34495e; left: 0px; top: 100px; } 100%{ background-color: #a561ff; left: 0px; top: 0px; } } |
See the Pen CSS動畫Animation-百分比 by Jimmy_Wu (@Jimmy_Wu) on CodePen.
1-3-animation 屬性詳解
1-3-1-animation-name 動畫名稱
1-3-2-animation-duration 播放一次動畫需要的時間
單位 s (秒)或 ms (毫秒)
1-3-3-animation-timing-function 動畫的加速度曲線
這個屬性是用來控制動畫執行過程中的速度變化
- ease，這是預設值，動畫一開始慢慢的，接著會漸漸加速，結束的時候再慢下來。
- linear，動畫從開始到結束的過程都是一樣的速度。
- ease-in，動畫開始的速度較慢。
- ease-out，動畫結束的速度較慢。
- ease-in-out，動畫的開始和結束時的速度較慢。
- cubic-bezier(n,n,n,n)，自行定義動畫的速度。
See the Pen animation-timing-function-demo by Jimmy_Wu (@Jimmy_Wu) on CodePen.
1-3-4-animation-delay 延遲多久後啟始動畫
這個動畫會延遲幾秒後才進行，例如，animation-delay: 5s，表示這個動畫會延遲5表後才執行。
1-3-5-animation-iteration-count 動畫播放次數
可用 infinite (無限次播放)
1-3-6-animation-direction 動畫播放方向
所謂的播放方向是指從動畫效果 0% 到 100% 的方向，同時也是預設的 normal 值。
- normal ：每次播放都是從 0% 至 100%
- reverse ：每次播放都是從 100% 至 0%
- alternate ：播放兩次以上的話，會從 0% 至 100% ，再從 100% 回到 0% ，以此類推
- alternate-reverse ：跟 alternate 相反，會先從 100% 開始播放
animation 播放方向 reverse
See the Pen 例：animation 播放方向 reverse by Jace Ju (@jaceju) on CodePen.
animation 播放方向 alternate
See the Pen 例：animation 播放方向 alternate by Jace Ju (@jaceju) on CodePen.
animation 播放方向 alternate-reverse
See the Pen 例：animation 播放方向 alternate-reverse by Jace Ju (@jaceju) on CodePen.
1-3-7-animation-fill-mode 指定動畫播放前後的狀態
如果想要控制動畫播放完後的最終狀態，可以用 animation-fill-mode 屬性
- none ：回到未播放動畫效果前的狀態
- forwards ：停在動畫的最後一個狀態上
- backwards ：停在動畫的第一個狀態上 (實測不出來)
- both ：視 animation-direction 來決定停在哪一個狀態上。
指定 animation 播放後的狀態 forwards
See the Pen 例：指定 animation 播放後的狀態 forwards by Jace Ju (@jaceju) on CodePen.
1-3-8-animation-play-state 指定動畫播放或暫停
決定 animation 執行或暫停
See the Pen 例：決定 animation 執行或暫停 by Jace Ju (@jaceju) on CodePen.
[nextpage title=”2-css-transitions”]
2-1-animation和transitions的比較
CSS3發佈的 transitions 提供了參數可以製作簡單的動畫效果。其動畫效果是由起始參數及結束時的參數所決定。transitions 只是提供設計師一個可以指定中間過度動畫的方法。
animation 和 transitions 最大的不同在於，tansitions 是當參數改變時觸發，而 animation 則是直接就執行，所以動畫效果需要明確的指定關鍵影格的參數。
2-2-基本的 transition
而 CSS 為了補足這方面的視覺轉換特效，特別加入 transition 屬性。 一個簡易的動畫效果就是在想要變化的狀態上，加入一個 transition 屬性，而其值為變化需歷時的秒數。
transition 就會自動幫我們補足中間的過場動畫
1 2 3 4 | div:hover { ... transition: 1s; } |
See the Pen 例：加入 transition 後的效果 by Jace Ju (@jaceju) on CodePen.
transition 改變顏色
1 2 3 4 | div:hover { background: red; transition: 3s; } |
See the Pen 例：用 transition 改變顏色 by Jace Ju (@jaceju) on CodePen.
2-3-transition 屬性詳解
2-3-1-transition-property 要做變換的 CSS 屬性
不是所有 CSS 屬性都可以使用 transition ，可以參考這篇 CSS animated properties 得知有哪些屬性可以使用 transition 。
只對單一屬性加入 transition
See the Pen 例：只對單一屬性加入 transition by Jace Ju (@jaceju) on CodePen.
對不同屬性同時做 transition ，用逗號將要做 transition 的屬性分隔開來，寫法像 img 的多重背景。
1 2 3 4 5 6 | div:hover { width: 200px; height: 200px; background: red; transition: 1s height, 2s width; } |
See the Pen 例：對不同屬性同時做 transition by Jace Ju (@jaceju) on CodePen.
2-3-2-transition-duration 變換需要的時間
單位為 s 或 ms
2-3-3-transition-delay 延遲多久後開始變換
單位為 s 或 ms
延遲變換 – 先變換一個屬性，再變換另一個屬性
1 2 3 4 5 | div:hover { width: 200px; height: 200px; transition: height 1s, width 1s 1s; } |
See the Pen 例：先變換一個屬性，再變換另一個屬性 by Jace Ju (@jaceju) on CodePen.
2-3-transition-timing-function 稱為 Timing Funciton
用名稱來定義變換時的加速度。Timing Funciton 包含數種模式，下圖可以看出它們的加速度曲線。
- linear: 匀速
- ease: 急加速後減速 (預設值)
- ease-in: 加速
- ease-out: 减速
- ease-in-out: 較平緩的 ease
- cubic-bezier: 自定義速度模式
cubic-bezier 函式
利用貝茲曲線函式來定義加速曲線，可以直接使用線上工具 cubic-bezier() 來找出需要的數值。
雙向的 transition
Transition 的效果只會作用在有加入 transition 屬性的那個狀態，一旦要回復至原來的狀態時，就會失去 Transition 的平順效果了。這時我們需要對原先的狀態，也加入 transition 。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .box { display: table width: 100px height: 100px border: 3px solid black color: white text-align: center background: blue transition: 1s } .box:hover{ width: 200px height: 200px transition: 1s } // 滑鼠移出hover後，原本 transition 屬性，就可以將跳回原大小的元素加入平順的動畫效果。 |
See the Pen 例：雙向的 transition by Jace Ju (@jaceju) on CodePen.
2-4-transition 的限制與使用條件
transition 的開始和結束都必須是具體數值；例如以下的 CSS 屬性值之間是無法被計算的，就無法使用 transition
- height: auto (不確定的值) 至 height: 100px (具體數值)
- display: none 至 display: block
- background: url(foo.jpg) 至 background: url(bar.jpg)
另外 transition 需要事件來觸發它的動作，所以沒辦法在一進頁面自動產生效果。
如果不透過 JavaScript 事件處理的話，就只能配合與事件有關的 Pseudo Classes (偽類別 :hover :focus 等) 來呈現效果了。
1 2 3 4 | .box:focus { width: 400px; transition: 1s; } |
See the Pen 例：搭配 :focus 偽類別 by Jace Ju (@jaceju) on CodePen.
搭配 jQuery 透過切換 class 來做 transition
1 2 3 4 5 6 7 8 9 | $(function () { $('#double').on('click', function () { $('.box').toggleClass('double'); }); $('#red').on('click', function () { $('.box').toggleClass('red'); }); }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | .box display: table width: 100px height: 100px border: 3px solid black color: white text-align: center background: blue transition: 1s span display: table-cell vertical-align: middle .box.double width: 200px height: 200px transition: 1s .box.red background: red transition: 1s |
See the Pen 例：透過切換 class 來做 transition by Jace Ju (@jaceju) on CodePen.
[nextpage title=”
3-Animation 搭配 Transform 做旋轉動畫”]
rotate(θ) 是指讓指定元素以參考點為中心軸 2D 旋轉 θ 度， transform-origin 會將 (x, y) 設為參考點。當我們把 transform: rotate(θ) 放到 @keyframes 中時， animation 就會改變 θ 值來做出動畫效果。
1 2 3 4 | div { transform: rotate(θ); transform-origin: x y; } |
模擬太陽、地球、月亮的週期
See the Pen 範例：模擬太陽、地球、月亮的週期 by Jace Ju (@jaceju) on CodePen.