1.transion: 只對塊級元素生效
  2.transition:transition-property, transition-duration, transition-timing-function, 和
transition-delay
  3.在transition屬性中，各個值的書寫順序是很重要的：第一個可以解析為時間的值會被賦值給
transition-duration，第二個可以解析為時間的值會被賦值給transition-delay。
  4.transition的完整寫法如下
    img{
      transition: 1s 1s height ease;
    }
    img{
      transition-property: height;
      transition-duration: 1s;
      transition-delay: 1s;
      transition-timing-function: ease;
    }
  5.transition的侷限
    transition的優點在於簡單易用，但是它有幾個很大的侷限。

（1）transition需要事件觸發，所以沒法在網頁載入時自動發生。

（2）transition是一次性的，不能重複發生，除非一再觸發。

（3）transition只能定義開始狀態和結束狀態，不能定義中間狀態，也就是說只有兩個狀態。

（4）一條transition規則，只能定義一個屬性的變化，不能涉及多個屬性。

CSS Animation

  div:hover {
    animation: 1s rainbow;
  }
  預設情況下，動畫只播放一次。加入infinite關鍵字，可以讓動畫無限次播放。
  div:hover {
    animation: 1s rainbow infinite;
  }
  div:hover {
     animation: 1s rainbow forwards;
  }
  forwards表示讓動畫停留在結束狀態
  animation-fill-mode還可以使用下列值。

（1）none：預設值，回到動畫沒開始時的狀態。

（2）backwards：讓動畫回到第一幀的狀態。

（3）both: 根據animation-direction（見後）輪流應用forwards和backwards規則。

  動畫迴圈播放時，每次都是從結束狀態跳回到起始狀態，再開始播放。animation-direction屬性
，可以改變這種行為。
  @keyframes rainbow {
    0% { background-color: yellow; }
    100% { background: blue; }
  }
  預設情況是，animation-direction等於normal。
  div hover {
    animation: 1s rainbow 3 normal;
 }
  此外，還可以等於取alternate、reverse、alternate-reverse等值。它們的含義見下圖（假定動
畫連續播放三次）。

 animation的各項屬性
  div:hover {
    animation: 1s 1s rainbow linear 3 forwards normal;
  }
  div:hover {
  animation-name: rainbow;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 1s;
    animation-fill-mode:forwards;
  animation-direction: normal;
  animation-iteration-count: 3;
}

如果想讓動畫保持突然終止時的狀態，就要使用animation-play-state屬性
div {
    animation: spin 1s linear infinite;
    animation-play-state: paused;
}

div:hover {
  animation-play-state: running;
}

目前，IE 10和Firefox（>= 16）支援沒有字首的animation，而chrome不支援，所以必須使用webkit
字首。

也就是說，實際運用中，程式碼必須寫成下面的樣子。

div:hover {
  -webkit-animation: 1s rainbow;
  animation: 1s rainbow;  
}

@-webkit-keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}

@keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}