一、過渡
什么是過渡？
過渡是指：某元素的css屬性值在一段時間內，平滑過渡到另外一個值，過渡主要觀察的是過程和結果。
設置能夠過渡的屬性：
支持過渡的樣式屬性，顏色的屬性，取值為數值，transform，漸變，visibility， 陰影
指定本次過渡生效的屬性：
transition-poperty:上面的css屬性/all
指定過渡的時長
transition-duration:過渡時長/s/ms
指定過渡時間曲線函數
transition-timing-function:
1.ease 默認值，慢-->快-->慢 慢速開始，快速變快，慢速結束
2.linear 勻速
3.ease-in 慢--->快 慢速開始,快速結束
4.ease-out 快速開始，慢速結束
5.ease-in-out 慢速開始，先加速再減速，慢速結束
指定延遲執行過渡的時間
transition-delay: s/ms
過渡屬性的編寫位置
1.將過渡放在元素聲明的樣式中（元素自己的樣式里）過渡效果有去有回。
2.將過渡放在元素的觸發操作中(hover),過渡效果有去無回。
過渡的簡寫：
transition:property duration timing-function delay;
最少的方式：transition:duration;
二、動畫
什么是動畫？
使元素從一種樣式，改變到另外一種，再改變到其他樣式......
相當於將很多個過渡效果放到一起使用。
關鍵幀：
1.動畫的執行時間點
2.該時間點上的樣式
動畫的實現步驟：
1.聲明動畫及動畫關鍵幀
@keyframes 動畫名稱{
//定義關鍵幀
0%{ 動畫開始的樣式 }
........
100%{動畫結束時的樣式}
}
2.調用動畫
animation-name:動畫名稱；
animation-duration:動畫播放一個周期的時間；
3.動畫的其他屬性
animation-delay
4.動畫的速度時間曲線函數
animation-timing-function
ease/linear/ease-in/ease-out/ease-in-out
5.animation-iteration-count
指定動畫的播放次數
取值，具體的數字/infinite無限次
6.animation-direction:
動畫的播放方向
取值 normal 正常 0%-100%
reverse 逆向播放 100%-0%
alternate 輪流播放
奇數次正向播放
偶數次逆向播放
7.簡寫方式：
animation:name duration timing-function delay iteration-count direction;
8.animation-fill-mode
指定動畫播放前后的顯示狀態
1.none 默認值
2.forwards 動畫完成后，保持在最后一個關鍵幀上
3.backwards(需要有delay)動畫開始之前，保持在第一個關鍵幀上
4.both,同時設置forwards和backwards
動畫的兼容性：
如果要兼容低版本的瀏覽器，需要在聲明動畫的時候加前綴
@keyframes 動畫名稱{}
@-webkit-keyframes
@-moz-keyframes
@-o-keyframes
三.CSS優化
目的：減少服務器壓力，提升用戶體驗。
1.優化原則
盡量減少HTTP請求的個數。
頁面頂部引入css樣式
將css和js放到外部獨立的文件夾中
2.CSS代碼優化
縮小樣式文件
減少樣式的重寫
避免出現空的src和href
選擇更優的樣式屬性值(能使用復合，簡寫的寫法,就不要單獨定義)
代碼壓縮