在CSS3中,我們可以使用animation-direction屬性定義動畫的播放方向。
語法:
animation-direction:取值;
說明:
animation-direction屬性取值如下:
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3 animation-direction屬性</title> <style type="text/css"> @-webkit-keyframes mytranslate { 0%{} 100%{-webkit-transform:translateX(100px);} } #div1 { width:40px; height:40px; border-radius:20px; background-color:red; -webkit-animation-name:mytranslate; -webkit-animation-timing-function:linear; -webkit-animation-duration:2s; } #container { display:inline-block; width:140px; border:1px solid silver; } </style> </head> <body> <div id="container"> <div id="div1"></div> </div> </body> </html>
在浏覽器預覽效果如下:
分析:
上面動畫播放沿著正方向播放(從0%到100%),小球從左到右滾動。
-webkit-animation-direction:reverse;
當我們為動畫添加如上代碼時,動畫沿著反方向播放(從100%到0%),小球從右到左滾動。
大家可以在在線測試工具中試著把animation-direction屬性取值修改為alternate,看看實際效果又是如何。