css中的animation-play-state屬性怎么用

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

這篇文章給大家分享的是有關(guān)css中的animation-play-state屬性怎么用的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

　　CSS3animation-play-state屬性

　　作用：animation-play-state屬性規(guī)定動(dòng)畫正在運(yùn)行還是暫停。

　　語法：

　　animation-play-state:paused|running;

　　paused：規(guī)定動(dòng)畫已暫停。

　　running：規(guī)定動(dòng)畫正在播放。

　　說明：您可以在JavaScript中使用該屬性，這樣就能在播放過程中暫停動(dòng)畫。

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

　　CSS3animation-play-state屬性的使用示例

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<style>

　　div

　　{

　　width:100px;

　　height:100px;

　　background:red;

　　position:relative;

　　animation:mymove5s;

　　animation-play-state:running;

　　/*SafariandChrome*/

　　-webkit-animation:mymove5s;

　　-webkit-animation-play-state:running;

　　}

　　div:hover{

　　animation-play-state:paused;

　　-webkit-animation-play-state:paused;

　　}

　　@keyframesmymove

　　{

　　from{left:0px;}

　　to{left:200px;}

　　}

　　@-webkit-keyframesmymove/*SafariandChrome*/

　　{

　　from{left:0px;}

　　to{left:200px;}

　　}

　　</style>

　　</head>

　　<body>

　　</body>

　　</html>

css中的animation-play-state屬性怎么用

感謝各位的閱讀！關(guān)于“css中的animation-play-state屬性怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

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

css中的animation-play-state屬性怎么用

猜你喜歡

最新資訊

相關(guān)推薦

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