animation

概要

animation CSS プロパティは、animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction の各プロパティの値を設定するショートハンドプロパティです。

アニメーションが可能な CSS プロパティについての記述 があります。これらが CSS transitions についても当てはまることは、ここに書いておく価値があるでしょう。

構文

/* @keyframes duration | timing-function | delay | 
   iteration-count | direction | fill-mode | play-state | name */
  animation: 3s ease-in 1s 2 reverse both paused slidein;

/* @keyframes duration | timing-function | delay | name */
  animation: 3s linear 1s slidein;

/* @keyframes duration | name */
  animation: 3s slidein;

各アニメーションの定義の中での順序は重要です。<time> として解釈される最初の値は、 animation-duration に、そして2番目の値は、animation-delay に割り当てられます。

順序はまた、各アニメーションの定義において、他のキーワードから animation-name の値を区別するためにも重要です。animation-name 以外のプロパティの値としても解釈することが可能なキーワードは、ショートハンド以前にそれらのプロパティの値が見つかっていないのならば、animation-name ではなく、それらのプロパティの値として取り扱われます。また、シリアライズされる場合には、他のプロパティのデフォルトの値は少なくとも、他のプロパティの値と解釈することも可能なanimation-nameと区別する必要がある場合には出力する必要があり、他の場合には出力してもいいことになっています。

公式な構文

<single-animation>#
where 
<single-animation> = <time> || <single-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || <single-animation-name>
where 
<single-timing-function> = <single-transition-timing-function>
<single-animation-iteration-count> = infinite | <number>
<single-animation-direction> = normal | reverse | alternate | alternate-reverse
<single-animation-fill-mode> = none | forwards | backwards | both
<single-animation-play-state> = running | paused
<single-animation-name> = none | IDENT
where 
<single-transition-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)

例示

CSS animations を参照してください。

Cylon Eye

全てのブラウザの固有接頭辞を考慮して、全ての主要なブラウザで動作する線形アニメーションやグラデーションを取り込んだ cylon eye アニメーションは次の通りです。

  <div class="view_port">
  <div class="polling_message">
    Listening for dispatches
  </div>
  <div class="cylon_eye"></div>
</div>

.polling_message {
  color: white;
  float: left;
  margin-right: 2%;            
}

.view_port {
  background-color: black;
  height: 25px;
  width: 100%;
  overflow: hidden;
}

.cylon_eye {
  background-color: red;
  background-image: -webkit-linear-gradient(    left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
  background-image:    -moz-linear-gradient(    left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
  background-image:      -o-linear-gradient(    left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
  background-image:         linear-gradient(to right, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
  color: white;
  height: 100%;
  width: 20%;

  -webkit-animation: 4s linear 0s infinite alternate move_eye;
     -moz-animation: 4s linear 0s infinite alternate move_eye;
       -o-animation: 4s linear 0s infinite alternate move_eye;
          animation: 4s linear 0s infinite alternate move_eye;
}

@-webkit-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
   @-moz-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
     @-o-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
        @keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }

仕様

ブラウザ実装状況

[1] 部分的なサポート: animation-fill-mode プロパティは Android ブラウザ 2.3 より前のバージョンではサポートされていません。

[2] Opera 12.50のリリースノートを参照。

参考情報

• CSS アニメーションを使うには
• AnimationEvent