css中animation-fill-mode屬性怎么用

發(fā)布時(shí)間：2022-02-25 13:36:37 來源：億速云閱讀：193 作者：小新欄目：web開發(fā)

小編給大家分享一下css中animation-fill-mode屬性怎么用，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

　　注釋：其屬性值是由逗號(hào)分隔的一個(gè)或多個(gè)填充模式關(guān)鍵詞。

　　語法

　　animation-fill-mode:none|forwards|backwards|both;

　　值

　　描述

　　none

　　不改變默認(rèn)行為。

　　forwards

　　當(dāng)動(dòng)畫完成后，保持最后一個(gè)屬性值（在最后一個(gè)關(guān)鍵幀中定義）。

　　backwards

　　在animation-delay所指定的一段時(shí)間內(nèi)，在動(dòng)畫顯示之前，應(yīng)用開始屬性值（在第一個(gè)關(guān)鍵幀中定義）。

　　both

　　向前和向后填充模式都被應(yīng)用。

　　實(shí)例

　　為h2元素規(guī)定填充模式：

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<style>

　　div

　　{

　　width:100px;

　　height:100px;

　　background:red;

　　animation:myfirst5s;

　　animation-fill-mode:forwards;

　　-moz-animation:myfirst5s;/*Firefox*/

　　-webkit-animation:myfirst5s;/*SafariandChrome*/

　　-o-animation:myfirst5s;/*Opera*/

　　}

　　@keyframesmyfirst

　　{

　　from{background:red;}

　　to{background:yellow;}

　　}

　　@-moz-keyframesmyfirst/*Firefox*/

　　{

　　from{background:red;}

　　to{background:yellow;}

css中animation-fill-mode屬性怎么用

看完了這篇文章，相信你對(duì)“css中animation-fill-mode屬性怎么用”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

猜你喜歡