在CSS3中,我們可以使用animation-play-state屬性來定義動畫的播放狀態。
語法:
animation-play-state:取值;
說明:
animation-play-state屬性取值只有2個:running和paused。
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3 animation-play-state屬性</title> <style type="text/css"> @-webkit-keyframes mytranslate { 0%{} 50%{-webkit-transform:translateX(200px);} 100%{} } #div1 { width:40px; height:40px; border-radius:20px; background-color:red; -webkit-animation-name:mytranslate; -webkit-animation-timing-function:linear; -webkit-animation-duration:3s; -webkit-animation-iteration-count:infinite; } #container { display:inline-block; width:240px; border:1px solid silver; } </style> <script src="../App_js/jquery-1.11.3.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#btn_pause").click(function () { $("#div1").css("-webkit-animation-play-state", "paused"); }); $("#btn_run").click(function () { $("#div1").css("-webkit-animation-play-state", "running"); }); }) </script> </head> <body> <div id="container"> <div id="div1"></div> </div> <div id="control_btn"> <input id="btn_pause" type="button" value="暫停"/> <input id="btn_run" type="button" value="播放"/> </div> </body> </html>
在浏覽器預覽效果如下:
分析:
這裡我使用jQuery做了一個小程序,當點擊“暫停”按鈕時,設置動畫的animation-play-state屬性值為“paused”;當點擊“播放”按鈕時,設置動畫的animation-play-state屬性值為“running”。這種效果就跟視頻播放器中的“開始”和“暫停”的效果一樣,很有趣吧。