對transition,transform,animation的疑惑

名詞解釋

好吧,若是僅僅是按照百度字典的解釋,我根本分辨不出,變換,變化,轉換/化的意義

• 咱們先來看一下百度翻譯

  transition: 過渡，轉變，變遷; [語] 轉換; [樂] 變調;
  transform: 變換; 改變; 改觀;
  translate: 翻譯; 轉化; 解釋;
  animation: 生氣，活潑;  動畫片製做，動畫片攝製;動畫片

• 最後一個animation能夠理解,就是動畫的意思,相似flash裏面的禎動畫(你沒聽過的話就當我沒說).
• 恩恩,顫抖吧!!!英語渣的程序員們.其他三個果真是傻傻分不清楚.

• 我來舉個例子,說明一下這些變的區別.
  1. animation就像動畫片的製做同樣,你須要先把每一頁(@keyframes)提早畫出來,而後他們前後展現,就組成了動畫.注重的是場景的變化,你可讓頁面中元素的多個屬性進行變化,想改變什麼,就改變什麼.
  2. transform傾向於變換,好比本身變大變小,扭曲,旋轉等,它指定了幾種常見的.簡單的動畫.你拿過來就能夠用,不用再本身繪製每一個場景了,可是一樣的,改變是有限的,你只能按照它給的那幾個屬性來操做.
  3. translate是transform中常見的.簡單的動畫中的一種,就是簡單的改變元素的寬高
  4. transition是過渡,傾向於描述變化過程,是的以上全部的變化都是須要一個時間來完成的.那麼這段時間是多長?變化是勻速仍是先快後慢?是當即執行仍是等會再說.

     注意

     • transform常常與transition一塊兒使用,對於animation須要本身設置,且transition對animation不起做用
     • 這裏的 變化過程不是僅指這裏的transform,而是任何的CSS變化,好比一個藍色的div原本是隱藏的,你經過JS讓其 "display:block"了,那麼當前顯示出來的時候,就要受到這個transition的控制.animation是自行設置的
     • 同時也說明,若是你要使用transform改變元素的某些屬性(好比transform改變寬高)的時候,你也須要設置transition來控制這些動畫的過程,最起碼你的設置個"動畫持續時間"和"all",否則動畫是不會執行的. 點擊這裏試試

  transition: -> 我就看你怎麼變 -> 
  transform: -> 我就變這幾個屬性  -> 
  translate: -> 拉長拉高   -> 
  animation: -> 動畫片   ->

• 接下來是參數 transition:該是一個簡寫屬性.
  • transition-property :通常寫all. 都有哪些屬性的變化由我控制?
  • transition-duration : 動畫持續的時間,必須寫單位(好比:2s)
  • transition-timing-function : 動畫是平滑進行,仍是先快後滿等?linear|ease|ease-in|ease-out|ease-in-out|cubic- bezier(n,n,n,n)在 cubic-bezier 函數中定義本身的值。可能的值是 0 至 1 之間的數值。
  • transition-delay : 延遲多少時間纔開始動畫

transition:all 2s ease-in-out .5s

• animation : 這也是一個簡寫屬性
  • animation-name: 禎動畫的名字
  • animation-duration: 動畫持續的時間
  • animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic- bezier(n,n,n,n)
  • animation-delay: 延遲多長時間纔開始動畫
  • animation-iteration-count: 動畫應該播放的次數 n(具體數字)|infinite(反覆播放)
  • animation-direction:是否應該輪流反向播放動畫 normal(默認正常播放)|alternate(輪流反向播放);