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