css3中的動畫屬性

一、過渡動畫（transition）

過渡動畫，就是能讓css樣式的變化，體現的更明顯一點，讓使用者能更清晰的看見樣式的變化。

過渡的實現我們一般通過事件來觸發（例如滑鼠單擊、獲得焦點、被點選或對元素任何改變中觸發）

1. transition-property：檢索或設定物件中的參與過渡的屬性/*all為預設*/

3. transition-delay：檢索或設定物件延遲過渡的時間 /*同上*/

4. transition-timing-function：檢索或設定物件中過渡的動畫型別 /*控制過渡動畫的速度型別預設為ease-in-out（先加速後減速）;還有幾種 linear(勻速) ease（平滑的過渡） ease-in(加速）ease-out（減速） */

一大堆是不是很嚇人，其實我們可以簡寫：例：transition:all 1s 3s linear;--->>all表示所有屬性都參與過渡，並且持續時間為1s,延遲3s,勻速進行！

過渡屬性新增的方式：給要參與過渡的元素新增即可。

看下面的案例↓

<
style
>
*.boxph2
/*滑鼠滑過
*/.box:hover p
.box:hover h2
style
>
<
div 
class
="box"
>
<
p>
p>
<
h2>
h2>
div>

這樣當我們滑鼠滑過div的時候,p標籤和h2標籤的寬度從100px到600px的變化過程就能看的更清楚了，不過唯一的不同是他們的速度（即動畫型別）不是一致的，但它們是同時完成過渡的，因為我們設定了相同的時間。

利用過渡我們常用來實現導航的圖示的變化、顏色、或者滑鼠滑過其他樣式變化從而達到與使用者互動的功能。

看過了過渡動畫是不是不過癮，其實我們利用css3能夠做到更多的動畫效果，那就是接下來的關鍵幀動畫。

二、關鍵幀動畫（animation）

關鍵幀的定義：

不同於過渡動畫只能定義首尾兩個狀態，關鍵幀動畫可以定義多個狀態，或者用關鍵幀的話來說，過渡動畫只能定義第一幀和最後一幀這兩個關鍵幀，而關鍵幀動畫則可以定義任意多的關鍵幀，因而能實現更複雜的動畫效果。

除了與過渡都能定義首尾狀態以外，他們還有乙個更大的相同點就是相關的屬性也特別多↓

1.animation-name

檢索或設定物件所應用的動畫名稱

必須與規則@keyframes配合使用，

eg:@keyframes mymove{} animation-name:mymove;

2.animation-duration

檢索或設定物件動畫的持續時間

說明：animation-duration:3s; 動畫完成使用的時間為3s

3.animation-timing-function

- 檢索或設定物件動畫的關鍵幀動畫型別

- 屬性值

- linear：勻速。等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0)

- ease：平滑。等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0)

- ease-in：由慢到快。等同於貝塞爾曲線(0.42, 0, 1.0, 1.0)

- ease-out：由快到慢。等同於貝塞爾曲線(0, 0, 0.58, 1.0)

- ease-in-out：由慢到快再到慢。等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)

- step-start:馬上跳到動畫每一結束楨的狀態【tips】可用來製作逐幀動畫！

5.animation-delay

+ 檢索或設定物件動畫延遲的時間

+ 說明：animation-delay:0.5s; 動畫開始前延遲的時間為0.5s)

6.animation-iteration-count

+ 檢索或設定物件動畫的迴圈次數

+ 屬性值

+ animation-iteration-count: infinite | number;

+ infinite：無限迴圈

+ number: 迴圈的次數

7.animation-direction

+ 檢索或設定物件動畫在迴圈中是否反向運動

+ 屬性值

+ normal：正常方向

+ reverse：反方向執行

+ alternate：動畫先正常執行再反方向執行，並持續交替執行

+ alternate-reverse：動畫先反執行再正方向執行，並持續交替執行

8.animation-play-state

+ 檢索或設定物件動畫的狀態

+ 屬性值

+ animation-play-state:running | paused;

+ running:運動

+ paused: 暫停

+ animation-play-state:paused; 當滑鼠經過時動畫停止，滑鼠移開動畫繼續執行

當然我們同樣可以並需要簡寫，因為實在是太太多了；

簡寫↓

二.（2）製作關鍵幀 @keyframes

接下來就是關鍵幀的製作了，因為我們使用animation屬性時第一步就是呼叫關鍵幀。

製作關鍵幀我們通過關鍵字@keyframes來定義，並且後面空格隔開的是你關鍵幀的名字，定義關鍵幀的方式有兩種↓

1.只定義首尾狀態

@keyframes mymoveto}

2.通過百分比定義多個狀態

@keyframes mymove

50%（中間再可以新增關鍵幀）

100%

}

<
style
>
.box
.movebox
/*製作關鍵幀
*/@keyframes mymove
25%50%
75%100%

/*谷歌相容模式*/

@-webkit-keyframes mymove

25%50%

75%100%

}
style
>
<
body
>
<
div 
class
="box"
>
div>
body
>

在瀏覽器執行後我們能看見動畫效果了。

這裡需要注意的是：1.製作關鍵幀動畫時改變的屬性必須一一對應起來，否則動畫不會執行，例如初始狀態下我們設定了left:0;後面就必須也是對left值的改變。

2.@keyframes規則存在相容問題，不同瀏覽器需加瀏覽器字首；

字首↓

通過動畫我們能實現很多功能，能自己diy不同的動畫效果，今天的分享到此結束！

css3中的動畫屬性

css3動畫屬性

CSS3動畫屬性

css3動畫屬性

css3中的動畫屬性

css3動畫屬性

CSS3動畫屬性

css3動畫屬性

相關推薦