CSS-Transform-transition-Animation

Transform

  根據個人理解，transform和width、height、background同樣，都是dom的屬性，不一樣的是它是css3旗下的，比較屌，可以對原來的dom元素進行移動、縮放、轉動、拉長或拉伸，跟canvas上的某些api神似，這麼說來transform好像能幹些js才能乾的事。

  transform分2D變換和3D變換，w3school中有很好的介紹和例子

 

Transition

注意：在變換屬性時，變換前的屬性值必須定義；否則會沒有效果；

例:想讓width從   100px  --->  200px  時，前邊的100px必須指明。主要用在    img   的 寬高是要注意

  transition的解釋是過渡，個人理解是css之間的變換，可是這個變換很屌很平滑，相似動畫。舉個栗子，一開始某個dom的類是classA，經過某種操做（好比被點擊了）後變成了classB，若是沒有transition，類之間的變換是很快的，機械般瞬間完成，可是有了transition，這便會是一個很緩和平滑的過程。

transition有4個屬性：語法：transition: property duration timing-function delay  從前到後4個屬性依次可理解成「過渡動畫變換的屬性」、「過渡花費時間」、「過渡過程的速度變化」和「過渡開始前的等待時間」（默認值：all 0 ease 0 前兩個是必須的 後兩個可省略）。

過渡屬性:

屬性	描述	CSS
transition	簡寫屬性，用於在一個屬性中設置四個過渡屬性。	3
transition-property	規定應用過渡的 CSS 屬性的名稱。	3
transition-duration	定義過渡效果花費的時間。默認是 0。	3
transition-timing-function	規定過渡效果的時間曲線。默認是 "ease"。	3
transition-delay	規定過渡效果什麼時候開始。默認是 0。	3

Animation

  Animation的解釋是動畫，增強版的transition。

  若是說transition能實現某些js效果，animation就更像是js了。相似於寫一個canvas特效，特效總共好比說多少時間，咱們能規定在何時該出現什麼樣的場景，而各個場景間的轉換則徹底由css3自己負責，而keyframes比如定義了一個js方法。

   主要應用在某個元素須要進行連續的n次css變換。

動畫屬性:

屬性	描述	CSS
@keyframes	規定動畫。	3
animation	全部動畫屬性的簡寫屬性，除了 animation-play-state 屬性。	3
animation-name	規定 @keyframes 動畫的名稱。	3
animation-duration	規定動畫完成一個週期所花費的秒或毫秒。默認是 0。	3
animation-timing-function	規定動畫的速度曲線。默認是 "ease"。	3
animation-delay	規定動畫什麼時候開始。默認是 0。	3
animation-iteration-count	規定動畫被播放的次數。默認是 1。	3
animation-direction	規定動畫是否在下一週期逆向地播放。默認是 "normal"。	3
animation-play-state	規定動畫是否正在運行或暫停。默認是 "running"。	3
animation-fill-mode	規定對象動畫時間以外的狀態。	3