Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。

概要

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

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

初期値以下の各プロパティのショートハンドとして補完します:
適用対象全要素、::before / ::after 疑似要素
継承不可
メディアvisual
計算値以下の各プロパティのショートハンドとして補完します:
アニメーションの可否不可
正規順序order of appearance in the formal grammar of the values

構文

/* @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%; }  }

仕様

仕様書 策定状況 コメント
CSS Animations
animation の定義
草案 最初の定義

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート (有) -webkit 5.0 (5.0) -moz
16.0 (16.0)
10 12 -o
12.50 #
4.0 -webkit
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート 2.1 -webkit [1]
4.0 -webkit
5.0 (5.0) -moz
16.0 (16.0)
? ? iOS 2.0 -webkit

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

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

参考情報

ドキュメントのタグと貢献者

 このページの貢献者: hamasaki, WhiteHawk-taka, teoli, ethertank, yyss, FredB
 最終更新者: hamasaki,