前言
css3動(dòng)畫的提出，取代了許多網(wǎng)頁(yè)動(dòng)畫圖像、Flash 動(dòng)畫和 JavaScript 實(shí)現(xiàn)的效果。
兼容性
Internet Explorer 10、Firefox 以及 Opera 支持 animation 屬性。
Safari 和 Chrome 支持替代的 -webkit-animation 屬性。
@keyframes 規(guī)則
@keyframes與動(dòng)畫名稱連接，并規(guī)定好動(dòng)畫的時(shí)長(zhǎng)等其余屬性，從而設(shè)置了動(dòng)畫名稱的元素便能進(jìn)行動(dòng)畫效果的顯示。
animation
| 屬性名稱 | 屬性描述 |
|---|---|
| animation-name | 規(guī)定需要綁定到選擇器的 keyframe 名稱 |
| animation-duration | 規(guī)定完成動(dòng)畫所花費(fèi)的時(shí)間，以秒或毫秒計(jì) |
| animation-timing-function | 規(guī)定動(dòng)畫的速度曲線 |
| animation-delay | 規(guī)定在動(dòng)畫開始之前的延遲 |
| animation-iteration-count | 規(guī)定動(dòng)畫應(yīng)該播放的次數(shù) |
| animation-direction | 規(guī)定是否應(yīng)該輪流反向播放動(dòng)畫 |
animation-timing-function 速度曲線
- linear:線性過(guò)度。
- ease:平滑過(guò)度。
- ease-in:由慢到快。
- ease-out:由快到慢。
- ease-in-out:由慢到快又變慢。
animation-iteration-count 設(shè)置動(dòng)畫循環(huán)次數(shù)
infinite（無(wú)限循環(huán)） | <number>;
animation-direction 設(shè)置動(dòng)畫的方向
- normal：正常方向；
- reverse：反方向運(yùn)行；
- alternate：動(dòng)畫現(xiàn)正常運(yùn)行在反方向運(yùn)行，并持續(xù)交替運(yùn)行；
- alternate-reverse：動(dòng)畫先反運(yùn)行再正方向運(yùn)行，并持續(xù)交替運(yùn)行。
后兩種需要animation-iteration-count設(shè)置為infinite；也就是循環(huán)。若沒(méi)有，后兩種則失去作用。
css3過(guò)渡與動(dòng)畫個(gè)人案例——彈入窗口
css3過(guò)渡與動(dòng)畫個(gè)人案例——彈入窗口
輪播圖的實(shí)現(xiàn)
待更新~
