046_CSS3动画
1. 通過CSS3, 我們能夠創建動畫, 這可以在許多網頁中取代動畫圖片、Flash動畫以及JavaScript。
2. CSS3動畫屬性
3. @keyframes規則
3.1. 通過@keyframes規則, 您能夠創建動畫。
3.2. 創建動畫的原理是, 將一套CSS樣式逐漸變化為另一套樣式。
3.3. 在動畫過程中, 您能夠多次改變這套CSS樣式。
3.4. 以百分比來規定改變發生的時間, 或者通過關鍵詞"from"和"to", 等價于0%和100%。
3.5. 0%是動畫的開始時間, 100%動畫的結束時間。
3.6. 為了獲得最佳的瀏覽器支持, 您應該始終定義0%和100%選擇器。
3.7. 請使用動畫屬性來控制動畫的外觀, 同時將動畫與選擇器綁定。
3.8. 您必須定義動畫的名稱和時長。如果忽略時長, 則動畫不會允許, 因為默認值是0。
3.9. 必須值
3.10. 實例
@keyframes mymove {0% {top: 0px;}25% {top: 200px;}50% {top: 100px;}75% {top: 200px;}100% {top: 0px;} }4.?animation屬性
4.1. animation 屬性是一個簡寫屬性, 用于設置八個動畫屬性:
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-play-state
- animation-fill-mode
4.2. 請始終規定animation-duration屬性, 否則時長為0, 就不會播放動畫了。
4.3. 默認值
4.4. 可能值
5. animation-name屬性
5.1. animation-name屬性為@keyframes動畫規定名稱。
5.2. 默認值
5.3. 可能值
6. animation-duration屬性
6.1. animation-duration屬性定義動畫完成一個周期所需要的時間, 以秒或毫秒計。
6.2. 默認值
6.3. 可能值
7. animation-timing-function屬性
7.1. animation-timing-function規定動畫的速度曲線。
7.2. 速度曲線定義動畫從一套CSS樣式變為另一套所用的時間。
7.3. 速度曲線用于使變化更為平滑。
7.4. 默認值
7.5. animation-timing-function使用名為三次貝塞爾(Cubic Bezier)函數的數學函數, 來生成速度曲線。您能夠在該函數中使用自己的值, 也可以預定義的值:
7.6. 實例
#div1 {animation-timing-function: linear; } #div2 {animation-timing-function: ease; } #div3 {animation-timing-function: ease-in; } #div4 {animation-timing-function: ease-out; } #div5 {animation-timing-function: ease-in-out; }7.7. cubic-bezier實例
#div1 {animation-timing-function: cubic-bezier(0,0,1,1); } #div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1); } #div3 {animation-timing-function: cubic-bezier(0.42,0,1,1); } #div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);} #div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1); }8. animation-delay屬性
8.1. animation-delay屬性定義動畫何時開始。
8.2. animation-delay值以秒或毫秒計。
8.3. 允許負值, -2s使動畫馬上開始, 但跳過2秒進入動畫。
8.4. 默認值
8.5. 可能值
9. animation-iteration-count屬性
9.1. animation-iteration-count屬性定義動畫的播放次數。
9.2. 默認值
9.3. 可能值
10. animation-direction屬性
10.1. animation-direction屬性定義是否應該輪流反向播放動畫。
10.2. 如果animation-direction值是"alternate", 則動畫會在奇數次數(1、3、5 等等)正常播放, 而在偶數次數(2、4、6 等等)向后播放。
10.3. 如果把動畫設置為只播放一次, 則該屬性沒有效果。
10.4. 默認值
10.5. 可能值
11. animation-play-state屬性
11.1. animation-play-state屬性規定動畫正在運行還是暫停。
11.2. 默認值
11.3. 可能值
12. animation-fill-mode屬性
12.1. animation-fill-mode屬性規定動畫在播放之前或之后, 其動畫效果是否可見。
12.2. 其屬性值是由逗號分隔的一個或多個填充模式關鍵詞。
12.3. 默認值
12.4. 可能值
13. 例子
13.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>CSS3動畫</title><style type="text/css">div {margin: 20px;}#div1 {width: 100px;height: 100px;background: pink;float: left;animation-name: myfirst;animation-duration: 10s;animation-timing-function: linear;animation-delay: 1s;animation-iteration-count: 3;animation-direction: normal;animation-play-state: running;animation-fill-mode: backwards;}#div2 {width: 100px;height: 100px;background: pink;float: left;animation: myfirst 10s ease 1s 3 alternate running forwards;}#div3 {width: 100px;height: 100px;background: pink;float: left;animation: myfirst 10s ease-in 1s 2 alternate running both;}@keyframes myfirst {0% {background: red;}25% {background: yellow;}50% {background: blue;}75% {background: green;}100% {background: #00FF00;}}</style></head><body><div id="div1">div1</div><div id="div2">div2</div><div id="div3">div3</div></body> </html>13.2. 效果圖
?
總結
以上是生活随笔為你收集整理的046_CSS3动画的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 045_CSS3过渡
- 下一篇： 047_CSS3多列