CSS技術中的forwards屬性是一個比較有用的屬性,它可以使得一個屬性值在結束時維持原來的狀態。比如說,當一個動畫結束后,元素的屬性值會重新變為初始值,但是使用forwards屬性,就可以讓元素保持在動畫結束時的狀態,而不是回到初始值。
.animation { animation-name: move; animation-duration: 2s; animation-fill-mode: forwards; } @keyframes move { from { transform: translateX(0); } to { transform: translateX(100px); } }
上述代碼中,我們定義了一個名為move的動畫,從左到右移動100像素距離。在.animation類的樣式中,我們定義了該元素使用move動畫,并使用forwards屬性使得動畫結束后保持在最終狀態。
需要注意的是,使用forwards屬性只會使元素保持動畫結束時的狀態,而不會解除動畫造成的影響。比如說,如果上述動畫定義了opacity屬性,當動畫結束時,元素仍然是透明的,即使使用其他樣式修改opacity值也無法改變。因此,使用forwards屬性時需要注意動畫對應的屬性以及影響。
上一篇css foucus
下一篇css font用不了