css動畫分兩種：過渡效果transition 、關鍵幀動畫keyframes

一、過渡效果transition

需觸發一個事件（如hover、click）時，才改變其css屬性。

過渡效果通常在用戶將鼠標指針浮動到元素上時發生

過渡(transition)動畫只能定義首尾兩個狀態

transition主要包含四個屬性值：

transition-property：執行變換的屬性，默認值all，也可以時其他應用過渡效果的 CSS 屬性名稱列表，列表以逗號分隔，如width,height

transition-duration：變換延續的時間,以秒或毫秒計,eg. 5s

transition-timing-function：在延續時間段，變換的速率變化.

transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

transition-delay：變換延遲時間,以秒或毫秒計。

二、關鍵幀動畫

@keyframes 類似Flash中的關鍵幀動畫制作。

animate不需要觸發任何事件的情況下也可以隨時間變化而改變，所以可以在元素上直接調用。

關鍵幀動畫一般分兩步： 定義動畫、將動畫應用到元素上

step1 定義動畫：

有兩種方法來對它進行定義：關鍵字from

@keyframe 動畫名稱{
   時間點 { 
      element status
   }
   時間點 { 
     元素狀態
   }
}

如

@keyframe zoomIn{
          0% {opacity: 0,
            transform-origin:center;
             transform : rotate3d(0,0,1,-200deg);
            }
          100% {
            opacity: 1,
            transform-origin:center;
             transform : none;
          }
   }

step2 綁定動畫，即將動畫應用到頁面元素上--利用animation屬性。

CSS3的Animation有八個屬性

1. animation-name : keyframe 名稱
2. animation-duration :動畫持續時間
3. animation-delay ： 動畫開始前的延遲
4. animation-iteration-count ： n|infinite， 默認值1
5. animation-direction ： normal|alternate;應該輪流反向播放動畫。 默認值normal（正常播放） （alternate輪流反向播放）
6. animation-play-state
7. animation-fill-mode
8. animation-timing-function

一般簡寫為

animation: name duration timing-function delay iteration-count direction;

-webkit-animation: zoomIn 2s infinite linear;

        animation: zoomIn 1s infinite linear;

瀏覽器兼容：
 @-webkit-keyframe

@keyframe 

-webkit-animation

animation 

css3動畫效果：1基礎