css3動(dòng)畫保持狀態(tài)不變
css3動(dòng)畫在動(dòng)作結(jié)束時(shí)保持該狀態(tài)不變的解決辦法
animation-fill-mode : none | forwards | backwards | both;1、none：不改變默認(rèn)行為。
2、forwards ：當(dāng)動(dòng)畫完成后，保持最后一個(gè)屬性值（在最后一個(gè)關(guān)鍵幀中定義）。
3、backwards：在 animation-delay 所指定的一段時(shí)間內(nèi)，在動(dòng)畫顯示之前，應(yīng)用開始屬性值（在第一個(gè)關(guān)鍵幀中定義）。
4、both：向前和向后填充模式都被應(yīng)用。
CSS 動(dòng)畫不會(huì)在第一個(gè)關(guān)鍵幀播放之前或在最后一個(gè)關(guān)鍵幀播放之后影響元素，比如下面的例子，0.3s播放完動(dòng)畫之后元素會(huì)停留在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 屬性能夠覆蓋這種行為。
在不播放動(dòng)畫時(shí)（在開始之前，結(jié)束之后，或兩者都結(jié)束時(shí)），animation-fill-mode 屬性規(guī)定目標(biāo)元素的樣式。
下面的例子讓? 下面的例子在動(dòng)畫開始之前（在動(dòng)畫延遲期間）使? 動(dòng)畫設(shè)置的delay延遲時(shí)間是2s，所以動(dòng)畫之前先由紅色變成綠色，然后2s之后開始動(dòng)畫從綠色變成黃色經(jīng)過0.3s。由于backwards是開始應(yīng)用第一幀，所以動(dòng)畫結(jié)束之后又會(huì)變成紅色然后回到0的位置。 下面的例子在動(dòng)畫開始之前使? 設(shè)置了both屬性，動(dòng)畫之前先由紅色變成綠色，然后2s之后開始動(dòng)畫從綠色變成黃色經(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>
<b id="afajh"><abbr id="afajh"></abbr></b>