這里先附上我做的思維導(dǎo)圖峻厚，主要是對(duì)transform和transition和animation的知識(shí)點(diǎn)總結(jié)。
第一部分 transition的用法
transition的屬性是指過渡屬性浦夷。他有四個(gè)屬性辜王。如下
1transition-property 檢索或設(shè)置對(duì)象中的參與過渡屬性。通俗的講就是要取hover后定義的屬性名肥缔。他的值是
1no ?沒有屬性會(huì)獲得過渡效果
2all 所有屬性都會(huì)獲得過渡效果
3property ?定義應(yīng)用過渡效果的CSS屬性列表汹来，列表以逗號(hào)隔開
2transition-duration ?檢索或設(shè)置對(duì)象過渡的持續(xù)時(shí)間
3transition-timing-function ?檢索或設(shè)置對(duì)象過渡的類型?
值
1linear? 規(guī)定以相同速度開始至結(jié)束的過渡效果（等于 cubic-bezier(0,0,1,1)）怒见。勻速
2ease? 規(guī)定慢速開始姑宽，然后變快，然后慢速結(jié)束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）炮车。
3ease-in? 規(guī)定以慢速開始的過渡效果（等于 cubic-bezier(0.42,0,1,1)）。加速
4ease-in-out? 規(guī)定以慢速結(jié)束的過渡效果（等于 cubic-bezier(0,0,0.58,1)）纪隙。減速
5? cubic-bezier(n,n,n,n) ? ? ? ? ? 在 cubic-bezier 函數(shù)中定義自己的值扛或。可能的值是 0 至 1 之間的數(shù)值悲伶。自定義速度
4transition-delay ?檢索或設(shè)置對(duì)象過渡的時(shí)間
transiton的使用注意事項(xiàng)
（1）目前住涉，各大瀏覽器（包括IE 10）都已經(jīng)支持無前綴的transition，所以transition已經(jīng)可以很安全地不加瀏覽器前綴花沉。
（2）不是所有的CSS屬性都支持transition媳握，完整的列表查看這里，以及具體的效果蛾找。
（3）transition需要明確知道，開始狀態(tài)和結(jié)束狀態(tài)的具體數(shù)值晦雨，才能計(jì)算出中間狀態(tài)隘冲。比如绑雄，height從0px變化到100px，transition可以算出中間狀態(tài)万牺。但是洽腺，transition沒法算出0px到auto的中間狀態(tài)覆旱，也就是說，如果開始或結(jié)束的設(shè)置是height: auto藕坯，那么就不會(huì)產(chǎn)生動(dòng)畫效果噪沙。類似的情況還有，display: none到block辐马，background: url(foo.jpg)到url(bar.jpg)等等局义。
transition的局限
transition的優(yōu)點(diǎn)在于簡單易用，但是它有幾個(gè)很大的局限萄唇。
（1）transition需要事件觸發(fā)，所以沒法在網(wǎng)頁加載時(shí)自動(dòng)發(fā)生轿塔。
（2）transition是一次性的仲墨，不能重復(fù)發(fā)生，除非一再觸發(fā)目养。
（3）transition只能定義開始狀態(tài)和結(jié)束狀態(tài)，不能定義中間狀態(tài)幻梯，也就是說只有兩個(gè)狀態(tài)努释。
（4）一條transition規(guī)則，只能定義一個(gè)屬性的變化煞躬，不能涉及多個(gè)屬性。
CSS Animation就是為了解決這些問題而提出的恩沛。
