css3動畫如何在動作結束時保持該狀態不變
阿新 • • 發佈：2019-01-06
animation-fill-mode : none | forwards | backwards | both;
屬性值值 描述
none 預設值。動畫在動畫執行之前和之後不會應用任何樣式到目標元素。
forwards 在動畫結束後（由 animation-iteration-count 決定），動畫將應用該屬性值。
backwards 動畫將應用在 animation-delay 定義期間啟動動畫的第一次迭代的關鍵幀中定義的屬性值。這些都是 from 關鍵幀中的值（當 animation-direction 為 “normal” 或 “alternate” 時）或 to 關鍵幀中的值（當 animation-direction 為 “reverse” 或 “alternate-reverse” 時）。
both 動畫遵循 forwards 和 backwards 的規則。也就是說，動畫會在兩個方向上擴充套件動畫屬性。
initial 設定該屬性為它的預設值。請參閱 initial。
inherit 從父元素繼承該屬性。請參閱 inherit。
例項（新增下面屬性到類名裡面）
把物體動畫地從一個地方移動到另一個地方，並讓它停留在那裡：
animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards; /* Safari 和 Chrome */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
div
{
width:100px;
height