溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

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

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

這篇文章主要介紹css中的animation-fill-mode屬性怎么用，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

　　CSS3animation-fill-mode屬性

　　作用：animation-fill-mode屬性規(guī)定動(dòng)畫在播放之前或之后，其動(dòng)畫效果是否可見。

　　說明：默認(rèn)情況下，CSS動(dòng)畫在第一個(gè)關(guān)鍵幀播放完之前不會(huì)影響元素，在最后一個(gè)關(guān)鍵幀完成后停止影響元素。animation-fill-mode屬性可重寫該行為。

　　語(yǔ)法：

　　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)用。

　　注：InternetExplorer9以及更早的版本不支持animation-fill-mode屬性。

　　CSS3animation-fill-mode屬性的使用示例

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="utf-8">

　　<title></title>

　　<style>

　　div

　　{

　　width:100px;

　　height:100px;

　　background:red;

　　position:relative;

　　animation:mymove3s;

　　animation-iteration-count:2;

　　animation-fill-mode:forwards;

　　/*Safari和Chrome*/

　　-webkit-animation:mymove3s;

　　-webkit-animation-iteration-count:2;

　　-webkit-animation-fill-mode:forwards;

　　}

　　@keyframesmymove

　　{

　　from{top:0px;}

　　to{top:200px;}

　　}

　　@-webkit-keyframesmymove/*Safari和Chrome*/

　　{

　　from{top:0px;}

　　to{top:200px;}

　　}

　　</style>

　　</head>

　　<body>

　　<div></div>

　　</body>

　　</html>

以上是“css中的animation-fill-mode屬性怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

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

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手