溫馨提示×

溫馨提示×

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

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

css中@keyframes有什么用

發(fā)布時間：2022-03-23 13:39:29 來源：億速云 閱讀：217 作者：小新 欄目：web開發(fā)

這篇文章主要介紹css中@keyframes有什么用，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

　　css@keyframes

　　作用：通過@keyframes規(guī)則，您能夠創(chuàng)建動畫。

　　說明：

　　創(chuàng)建動畫的原理是，將一套CSS樣式逐漸變化為另一套樣式。在動畫過程中，您能夠多次改變這套CSS樣式。以百分比來規(guī)定改變發(fā)生的時間，或者通過關(guān)鍵詞"from"和"to"，等價于0%和100%。0%是動畫的開始時間，100%動畫的結(jié)束時間。為了獲得最佳的瀏覽器支持，您應(yīng)該始終定義0%和100%選擇器。

　　注釋：請使用動畫屬性來控制動畫的外觀，同時將動畫與選擇器綁定。

　　css@keyframes的使用示例

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<style>

　　div

　　{

　　width:100px;

　　height:100px;

　　background:red;

　　position:relative;

　　animation:mymove5sinfinite;

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

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

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

　　}

　　@keyframesmymove

　　{

　　0%{top:0px;}

　　25%{top:200px;}

　　75%{top:50px}

　　100%{top:100px;}

　　}

　　@-moz-keyframesmymove/*Firefox*/

　　{

　　0%{top:0px;}

　　25%{top:200px;}

　　75%{top:50px}

　　100%{top:100px;}

　　}

　　@-webkit-keyframesmymove/*SafariandChrome*/

　　{

　　0%{top:0px;}

　　25%{top:200px;}

　　75%{top:50px}

　　100%{top:100px;}

　　}

　　@-o-keyframesmymove/*Opera*/

　　{

　　0%{top:0px;}

　　25%{top:200px;}

　　75%{top:50px}

　　100%{top:100px;}

　　}

　　</style>

　　</head>

　　<body>

　　<p><b>注釋：</b>本例在InternetExplorer中無效。</p>

　　<div></div>

　　</body>

　　</html>

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

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

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

AI
助
手