詳細介紹CSS3中animation-direction屬性
- 零下一度原創
- 2017-05-18 14:34:432856瀏覽
CSS3 animation-direction 屬性 ，CSS 參考手冊 實例 先執行一遍動畫，然後再反向執行一遍動畫。檢索或設定物件動畫是否反向運動
先執行一次動畫，然後再反向執行一次動畫：
!DOCTYPE html> <html> <head> <style>
p { width:100px; height:100px; background:red; position:relative; animation:myfirst 5s infinite; animation-direction:alternate;
/* Safari 和 Chrome */ -webkit-animation:myfirst 5s infinite; -webkit-animation-direction:alternate; }
@keyframes myfirst { 0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;} }
@-webkit-keyframes myfirst /* Safari 和 Chrome */ { 0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} }
</style> </head> <body> <p><strong>注意：</strong>Internet Explorer 9 及其之前的版本不支持 animation-direction 属性。</p> <p></p> </body> </html>
瀏覽器支援
Internet Explorer 10、Firefox 和Opera 支援animation-direction 屬性。 Safari 和 Chrome 支援另一個可取代該屬性的屬性，即 -webkit-animation-direction 屬性。注意：Internet Explorer 9 及其先前的版本不支援 animation-direction 屬性。
定義與用法
animation-direction 屬性定義是否循環交替反向播放動畫。注意：如果動畫被設定為只播放一次，則該屬性將無法運作。
CSS 語法
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inhe【相關推薦】1. 2. 3. 4. ###詳解css3中兩種暫停方式（transition、animation）######
以上是詳細介紹CSS3中animation-direction屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn