一、css3過渡

語法： transition: 過渡屬性 過渡時間 延遲時間 過渡方式;

1.過渡屬性(transition-property)

取值：all 所有發生變化的css屬性都添加過渡

　　eg: transition: all 1s;

　　ident 指定要過渡的css屬性列表

　　eg: transition:border-radius 1s,background 2s;

　　none 沒有屬性發生過渡

注：我們可以省略滑過狀態或其他狀態的過渡屬性，但是不能省略初始狀態的transition屬性

2.過渡時間(transition-duration)

取值：0 不過渡

　　　time 設置一個正數，單位為s

eg: transition: all 1s;

3.延遲時間(transition-delay)

取值：

0 不延遲，過渡動畫正常執行

正數 按照設置的時間延遲執行過渡動畫

負數 設置時間前的動畫將會被截斷

4.過渡方式(transition-function)

取值：

ease 緩解效果，默認值

linear 勻速運動

ease-in 加速運動

ease-out 減速運動

ease-in-out 慢-快-慢

---

?

二、css3動畫

語法： animation:動畫名稱 動畫執行時間 動畫延遲執行時間 動畫播放次數 動畫播放后的狀態;

動畫是由一幀一幀的關鍵幀組成的，在設置animation之前要先定義動畫關鍵幀：

語法：

@keyframes 動畫名稱{
0%{
屬性:屬性值;
}
50%{
屬性:屬性值;
}
...
100%{
屬性:屬性值;
}
}

@keyframes 動畫名稱{
from{
屬性:屬性值;
}
...
to{
屬性:屬性值;
}
}

1.動畫名稱(animation-name)

eg: animation:ball 1s;

注：動畫名稱要與@keyframes中的動畫名稱一致

2.動畫執行一次所需的時間(animation-duration)

取值：

time: 正數，單位為秒(s)或者毫秒(ms)，默認為0，不執行動畫

3.動畫延遲執行的時間(animation-delay)

取值：

0: 默認值，不延遲

正數： 按照設置的時間延遲執行動畫

負數： 設置時間前的動畫將會被截斷

4.設置動畫的播放次數(animation-iteration-count)

取值：

number 可以設置為正整數

infinite 無限循環播放

5.設置對象動畫的狀態(animation-play-state)

取值：

running 默認值，運動

paused 動畫暫停

6.設置動畫的播放方式(animation-timing-function)

取值：

ease

linear 勻速運動

ease-in

ease-out

ease-in-out

step-start 馬上轉跳到動畫的結束狀態或馬上轉跳到下一幀，中間沒有過渡

step-end 保持動畫開始時的狀態，直到動畫執行結束，轉跳到動畫結束狀態

steps(n,start|end)

n代表動畫分幾步完成

7.設置對象動畫的運動方向(animation-direction)

取值：

normal 默認值，正常方向運動

reverse 與normal方向相反運動

alternate 奇數次正方向，偶數次反方向

alternate-reverse 奇數次反方向，偶數次正方向

8.設置對象動畫時間之外的狀態(animation-fill-mode)

取值：

none 默認值，不設置對象動畫之外的狀態

forwards 保持動畫結束時的狀態

backwards 保持動畫開始時的狀態

both 遵循forwards和backwards兩個規則

---

?三、CSS3 transition和animation的區別

1.transition動畫執行需要出發條件，animation動畫出發在頁面加載完成后可以自動執行

2.transition觸發一次執行一次，多次執行需要執行多次觸發條件，animation可以無限循環播放，也可限制次數

3.transition只能設置開始和結束狀態 不能設置中間的動態

---

?

擴展：隱藏變形元素的背面 backface-visibility:hidden;

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的从零开始学习前端开发 — 15、CSS3过渡、动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。