css中的animation-duration屬性有什么用

發(fā)布時(shí)間：2022-03-01 15:12:08 來源：億速云閱讀：284 作者：小新欄目：web開發(fā)

這篇文章主要介紹了css中的animation-duration屬性有什么用，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

　　CSS3animation-duration屬性

　　作用：animation-duration屬性定義動(dòng)畫完成一個(gè)周期所需要的時(shí)間，以秒或毫秒計(jì)。

　　語法：

　　animation-duration:time

　　time：規(guī)定完成動(dòng)畫所花費(fèi)的時(shí)間。默認(rèn)值是0，意味著沒有動(dòng)畫效果。

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

　　CSS3animation-duration屬性的使用示例

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<style>

　　div

　　{

　　width:100px;

　　height:100px;

　　background:red;

　　position:relative;

　　animation:mymoveinfinite;

　　animation-duration:2s;

　　/*SafariandChrome*/

　　-webkit-animation:mymoveinfinite;

　　-webkit-animation-duration:2s;

　　}

　　@keyframesmymove

　　{

　　from{top:0px;}

　　to{top:200px;}

　　}

　　@-webkit-keyframesmymove/*SafariandChrome*/

　　{

　　from{top:0px;}

　　to{top:200px;}

　　}

　　</style>

　　</head>

　　<body>

　　<p><strong>注：</strong>InternetExplorer9以及更早的版本不支持animation-name屬性。</p>

　　<p><b>注：</b>始終規(guī)定animation-duration屬性，否則時(shí)長為0，就不會播放動(dòng)畫了。</p>

　　</body>

　　</html>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“css中的animation-duration屬性有什么用”這篇文章對大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

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

css中的animation-duration屬性有什么用

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽