CSS 動畫 CSS animation

animation-delay (en-US)定義元素讀取完畢到動畫開始的間隔時間。

animation-direction (en-US)定義是否動畫播放完畢後將會反向播放。

animation-duration (en-US)定義動畫完成一次週期的時間。

animation-iteration-count (en-US)定義動畫重複的次數。你可以用 infinite 來讓動畫永遠重複播放。

animation-name (en-US)定義關鍵影格 @keyframes (en-US) 的名字。

animation-play-state (en-US)控制動畫的播放狀態。有 pause 和 running 兩種值,後者為預設值。

animation-timing-function (en-US)定義動畫轉變時時間的加速曲線 (例如 linear)。

animation-fill-mode定義元素在動畫播放外(動畫開始前及結束後)的狀態。

SAMPLE

<style type="text/css">
  p {
    -moz-animation-duration: 3s;
    -moz-animation-name: slidein;
  }

  @-moz-keyframes slidein {
    from {
      margin-left: 100%;
      width: 300%
    }

    to {
      margin-left: 0%;
      width: 100%;
    }
  }
</style>