動畫的原理： 1.視覺暫留作用 2.畫面逐漸變化 動畫的作用-愉悅感 ### css中的動畫類型 1.transition補間動畫——從一種狀態變成另一種狀態 2.keyframe關鍵幀動畫 3.逐幀動畫 ## 1.transition ``` //transition指定多個屬性 transition: width 2s,height 3s; ``` transition-timing-function 屬性規定過渡效果的速度曲線。 ``` transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out ``` ## 2.animation [animation-fill-mode](http://www.w3school.com.cn/cssref/pr_animation-fill-mode.asp):屬性規定動畫在播放之前或之后，其動畫效果是否可見 animation-timing-function:指定時間和動畫進度之間的關系 ``` animation-timing-function:steps(1) //steps(n)指定關鍵幀之間有幾個動畫 ``` githun上好用的動畫庫: [https://daneden.github.io/animate.css/](https://daneden.github.io/animate.css/) animation demo: [https://gitee.com/frontendLol/cssJiaoCheng/blob/master/05-animal.html](https://gitee.com/frontendLol/cssJiaoCheng/blob/master/05-animal.html) ### 3.面試 * css動畫的實現方式有幾種 ``` transition keyframes(animation) ``` * 如何實現逐幀動畫 ``` 1.使用關鍵幀動畫 2.去掉補間(steps) ``` * css動畫性能 ``` 1.性能不壞 2.部分情況下優于js 3.但js可以做的更好 4.部分高危屬性box-shadow等 ```