執行個體
先執行一遍動畫，然後再反向執行一遍動畫：
!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. 分享一個監聽css3動畫（animation）結束事件執行個體
2. 必須掌握的CSS3動畫（Animation）的8大屬性
3. 利用animation屬性實現迴圈間的延時執行執行個體教程
4. 詳解css3中兩種暫停方式（transition、animation）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
