詳細介紹CSS3中animation-direction屬性-css教學-PHP中文網

首頁

web前端

css教學

詳細介紹CSS3中animation-direction屬性

零下一度

May 18, 2017 pm 02:34 PM

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

登入後複製

【相關推薦】

分享一個監聽css3動畫（animation）結束事件實例

必須掌握的CSS3動畫（Animation）的8大屬性

利用animation屬性實作循環間的延時執行實例教學

4. ###詳解css3中兩種暫停方式（transition、animation）######

以上是詳細介紹CSS3中animation-direction屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1664

CakePHP 教程

1423

Laravel 教程

1317

PHP教程

1268

C# 教程

1243

Related knowledge

如何在Python中取得整數位面量屬性而不是SyntaxError？ Aug 20, 2023 pm 07:13 PM

要獲得intliteral屬性而不是語法錯誤，請使用空格或括號。intliteral是Python中NumericLiterals的一部分。NumericLiterals還包括以下四種不同的數字類型-int（有符號整數） - 它們通常被稱為整數或整數，是正數

如何在Java中使用Gson重命名JSON的屬性？ Aug 27, 2023 pm 02:01 PM

Gson@SerializedName註解可以序列化為JSON，並將提供的名稱值作為其欄位名稱。此註解可以覆寫任何FieldNamingPolicy，包括可能已在Gson實例上設定的預設欄位命名策略。可以使用GsonBuilder類別來設定不同的命名策略。語法@Retention(value=RUNTIME)@Target(value={FIELD,METHOD})public@interfaceSerializedName範例importcom.google.gson.annotations.*;

Python的dir()函數：查看物件的屬性和方法 Nov 18, 2023 pm 01:45 PM

Python的dir()函數：查看物件的屬性和方法，需要具體程式碼範例摘要：Python是一種強大而靈活的程式語言，其內建函數和工具為開發人員提供了許多方便的功能。其中一個非常有用的函數是dir()函數，它允許我們查看一個物件的屬性和方法。本文將介紹dir()函數的用法，並透過具體的程式碼範例來示範其功能和用途。正文：Python的dir()函數是一個內建函數，

css3怎麼實現花邊邊框 Sep 16, 2022 pm 07:11 PM

在css中，可以利用border-image屬性來實作花邊邊框。 border-image屬性可以使用圖片來建立邊框，即給邊框加上背景圖片，只需要將背景圖片指定為花邊樣式即可；語法「border-image: url(圖片路徑) 向內偏移值圖像邊界寬度outset 是否重複;」。

Win11磁碟屬性未知怎麼辦 Jul 03, 2023 pm 04:17 PM

　　Win11磁碟屬性未知怎麼辦？近期Win11用戶在電腦的使用中，發現系統出現提示磁碟錯誤的情況，這是怎麼回事？而且該如何解決呢？很多小夥伴不知道怎麼詳細操作，小編下面整理了Win11磁碟出錯的解決步驟，如果你有興趣的話，跟著小編一起往下看看吧！ Win11磁碟出錯的解決步驟1、首先，按鍵盤上的Win+E組合鍵，或點選工作列上的檔案總管；　　2、檔案總管的右側邊欄，找到邊右鍵點選本機磁碟（C ：），在開啟的選單項目中，選擇屬性；　　3、本機磁碟（C：）屬性窗口，切換到工具選

使用Vue.set函數實作動態新增屬性的方法和範例 Jul 24, 2023 pm 07:22 PM

使用Vue.set函數實作動態新增屬性的方法和範例在Vue中，如果我們想要動態地新增一個屬性到一個已經存在的物件上，通常會使用Vue.set函數來實作。 Vue.set函數是Vue.js提供的一個全域方法，它能夠在新增屬性時保證響應式更新。本文將介紹Vue.set的使用方法，並提供一個具體的範例。首先，在Vue中，我們通常會使用data選項來宣告響應式的資料。

爐石戰記絕望線縷屬性介紹 Mar 20, 2024 pm 10:36 PM

絕望線縷是暴雪娛樂旗下佳作《爐石戰記》中的一張稀有卡牌，在「威茲班的工坊」卡包中有機會獲得。可消耗100/400點奧術之塵合成普通/金色版本。爐石戰記絕望線縷屬性介紹答：在威茲班的工坊卡包中有幾率獲得，也可以透過奧術之塵合成。稀有度：稀有類型：法術職業：死亡騎士法力值：1效果：使所有隨從獲得亡語：對所有隨從造成1點傷害

pageXOffset屬性在JavaScript中的作用是什麼？ Sep 16, 2023 am 09:17 AM

如果您想要取得文件從視窗左上角捲動到的像素，請使用pageXoffset和pageYoffset屬性。對水平像素使用pageXoffset。範例您可以嘗試執行以下程式碼來了解如何在JavaScript中使用pageXOffset屬性-現場示範<!DOCTYPEhtml><html> <head> <style> &amp

See all articles

詳細介紹CSS3中animation-direction屬性

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題