CSS3設定動畫的相關屬性有哪些

動畫相關屬性有：transform、transform-origin、transition、「@keyframes」、animation、animation-name、animation-duration、animation-delay等。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

css3有三種動畫分為：transform、transition、animation

#1、transform（2D/3D 轉換屬性）

##3 transform-style 3D空間中的指定如何嵌套元素 3 perspective 指定3D元素是如何查看透視圖 3 #perspective-origin 指定3D元素底部位置 3 backface-visibility 定義一個元素是否應該是可見的，不對著螢幕時 3

屬性	說明	#CSS
transform	適用於2D或3D轉換的元素	3
transform-origin	#允許您更改轉換元素位置

2、transition（過渡屬性）

屬性 說明 CSS transition 此屬性是transition-property、transition-duration、transition-timing-function、transition-delay 的簡寫形式。 3 transition-property 設定用來進行過渡的 CSS 屬性。 3 transition-duration 設定過渡進行的時間長度。 3 transition-timing-function 設定過渡進行的時序函數。 3 transition-delay 指定過渡開始的時間。 3

3、animation（動畫屬性）

屬性 描述 CSS #@keyframes 定義一個動畫,@keyframes定義的動畫名稱用來被animation-name所使用。 3 animation 複合屬性。檢索或設定物件所套用的動畫特效。 3 animation-name 檢索或設定物件所套用的動畫名稱,必須與規則@keyframes搭配使用，因為動畫名稱由@keyframes定義 3 animation-duration 檢索或設定物件動畫的持續時間 3 #animation-timing-function #或設定物件動畫的轉換類型 3 ##animation-delay #animation-iteration-count animation-direction animation-play-state 範例：

檢索或設定物件動畫的延遲時間	3
檢索或設定物件動畫的循環次數	3
檢索或設定物件動畫在循環中是否反向運動	3
檢索或設定物件動畫的狀態	3

（學習影片分享：

css影片教學

）

以上是CSS3設定動畫的相關屬性有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！