一、css3過渡

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

1.過渡屬性(transition-property)

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

　　eg: transition: all 1s;

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

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

　　none 沒有屬性發(fā)生過渡

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

2.過渡時間(transition-duration)

取值：0 不過渡

　　　time 設(shè)置一個正數(shù)，單位為s

eg: transition: all 1s;

3.延遲時間(transition-delay)

取值：

0 不延遲，過渡動畫正常執(zhí)行

正數(shù) 按照設(shè)置的時間延遲執(zhí)行過渡動畫

負(fù)數(shù) 設(shè)置時間前的動畫將會被截斷

4.過渡方式(transition-function)

取值：

ease 緩解效果，默認(rèn)值

linear 勻速運動

ease-in 加速運動

ease-out 減速運動

ease-in-out 慢-快-慢

---

?

二、css3動畫

語法： animation:動畫名稱 動畫執(zhí)行時間 動畫延遲執(zhí)行時間 動畫播放次數(shù) 動畫播放后的狀態(tài);

動畫是由一幀一幀的關(guān)鍵幀組成的，在設(shè)置animation之前要先定義動畫關(guān)鍵幀：

語法：

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

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

1.動畫名稱(animation-name)

eg: animation:ball 1s;

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

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

取值：

time: 正數(shù)，單位為秒(s)或者毫秒(ms)，默認(rèn)為0，不執(zhí)行動畫

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

取值：

0: 默認(rèn)值，不延遲

正數(shù)： 按照設(shè)置的時間延遲執(zhí)行動畫

負(fù)數(shù)： 設(shè)置時間前的動畫將會被截斷

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

取值：

number 可以設(shè)置為正整數(shù)

infinite 無限循環(huán)播放

5.設(shè)置對象動畫的狀態(tài)(animation-play-state)

取值：

running 默認(rèn)值，運動

paused 動畫暫停

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

取值：

ease

linear 勻速運動

ease-in

ease-out

ease-in-out

step-start 馬上轉(zhuǎn)跳到動畫的結(jié)束狀態(tài)或馬上轉(zhuǎn)跳到下一幀，中間沒有過渡

step-end 保持動畫開始時的狀態(tài)，直到動畫執(zhí)行結(jié)束，轉(zhuǎn)跳到動畫結(jié)束狀態(tài)

steps(n,start|end)

n代表動畫分幾步完成

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

取值：

normal 默認(rèn)值，正常方向運動

reverse 與normal方向相反運動

alternate 奇數(shù)次正方向，偶數(shù)次反方向

alternate-reverse 奇數(shù)次反方向，偶數(shù)次正方向

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

取值：

none 默認(rèn)值，不設(shè)置對象動畫之外的狀態(tài)

forwards 保持動畫結(jié)束時的狀態(tài)

backwards 保持動畫開始時的狀態(tài)

both 遵循forwards和backwards兩個規(guī)則

---

?三、CSS3 transition和animation的區(qū)別

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

2.transition觸發(fā)一次執(zhí)行一次，多次執(zhí)行需要執(zhí)行多次觸發(fā)條件，animation可以無限循環(huán)播放，也可限制次數(shù)

3.transition只能設(shè)置開始和結(jié)束狀態(tài) 不能設(shè)置中間的動態(tài)

---

?

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。