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中文網其他相關文章！
我們如何標記Google字體並創建Goofonts.comApr 12, 2025 pm 12:02 PMGoofonts是由開發人員和設計師丈夫簽名的附帶項目，它們都是版式的忠實擁護者。我們一直在標記Google
使用JavaScript API練習GraphQl查詢Apr 12, 2025 am 11:33 AM學習如何構建GraphQL API可能具有挑戰性。但是您可以學習如何在10分鐘內使用GraphQL API！碰巧的是，我得到了完美的
將類型設置在圓上...帶偏移路徑Apr 12, 2025 am 11:00 AM這裡是Yuanchuan的一些合法CSS騙局。有此CSS屬性偏移路徑。曾幾何時，它被稱為Motion-Path，然後被更名。我
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver Mac版
視覺化網頁開發工具
WebStorm Mac版
好用的JavaScript開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
mPDF
mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），
