css3動畫保持狀態(tài)不變
css3動畫在動作結束時保持該狀態(tài)不變的解決辦法
animation-fill-mode : none | forwards | backwards | both;1、none：不改變默認行為。
2、forwards ：當動畫完成后，保持最后一個屬性值（在最后一個關鍵幀中定義）。
3、backwards：在 animation-delay 所指定的一段時間內(nèi)，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）。
4、both：向前和向后填充模式都被應用。
CSS 動畫不會在第一個關鍵幀播放之前或在最后一個關鍵幀播放之后影響元素，比如下面的例子，0.3s播放完動畫之后元素會停留在0的位置，而不是100px的位置，而且元素是紅色的。
<head><style>@keyframes move {0% {transform: translate3d(0, 0, 0);background: green;}100% {transform: translate3d(100px, 0, 0);background: yellow;}}.box {width: 100px;height: 100px;background: red;animation: move 0.3s;}style>head><body><div class="box">div>body>
animation-fill-mode 屬性能夠覆蓋這種行為。
在不播放動畫時（在開始之前，結束之后，或兩者都結束時），animation-fill-mode 屬性規(guī)定目標元素的樣式。
下面的例子讓? 下面的例子在動畫開始之前（在動畫延遲期間）使? 動畫設置的delay延遲時間是2s，所以動畫之前先由紅色變成綠色，然后2s之后開始動畫從綠色變成黃色經(jīng)過0.3s。由于backwards是開始應用第一幀，所以動畫結束之后又會變成紅色然后回到0的位置。 下面的例子在動畫開始之前使? 設置了both屬性，動畫之前先由紅色變成綠色，然后2s之后開始動畫從綠色變成黃色經(jīng)過0.3s，最后停留在100px的位置，元素也是黃色的。.box { width: 100px; height: 100px; background: pink; animation: move 0.3s; animation-fill-mode: forwards;}<head> <style> @keyframes move { 0% { transform: translate3d(0, 0, 0); background: green; } 100% { transform: translate3d(100px, 0, 0); background: yellow; } } .box { width: 100px; height: 100px; background: red; animation: move 0.3s; animation-delay: 2s; animation-fill-mode: backwards; }style>head><body> <div class="box">div>body><head> <style> @keyframes move { 0% { transform: translate3d(0, 0, 0); background: green; } 100% { transform: translate3d(100px, 0, 0); background: yellow; } } .box { width: 100px; height: 100px; background: red; animation: move 0.3s; animation-delay: 2s; animation-fill-mode: both; }style>head><body> <div class="box">div>body>