animation

ジャンプ先:
  1. 構文
  2. 例
  3. アクセシビリティの考慮事項
  4. 仕様書
  5. ブラウザーの対応
  6. 関連情報

CSS の animation 一括指定プロパティは、スタイル間のアニメーションによる移行を設定します。これは animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state の一括指定です。

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

アニメーションできるプロパティの説明が利用できます。この説明は CSS 遷移にも有効であることは特筆に値します。

初期値一括指定の各プロパティとして
適用対象すべての要素、::before / ::after 疑似要素
継承なし
メディア視覚
計算値一括指定の各プロパティとして
アニメーションの種類個別
正規順序形式文法における値の出現順

構文

animation プロパティは1つまたはコンマで区切った複数のアニメーションとして指定します。

それぞれ個別のアニメーションは以下のように定義されます。

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

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

値

id="<single-animation-iteration-count>"><single-animation-iteration-count>
アニメーションが実行される回数です。 animation-iteration-count で利用できる値の一つでなければなりません。
<single-animation-direction>
アニメーションが実行される方向です。 animation-direction で利用できる値の一つでなければなりません。
<single-animation-fill-mode>
アニメーションの実行の前後にどのようにスタイルが適用されるかを定めます。 animation-fill-mode で利用できる値の一つでなければなりません。
<single-animation-play-state>
アニメーションが実行中かどうかを定めます。 animation-play-state で利用できる値の一つでなければなりません。

構文形式

<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> || [ none | <keyframes-name> ]
where 
<single-timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function> | <frames-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
<keyframes-name> = <custom-ident> | <string>
where 
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, [ start | end ] ]?)
<frames-timing-function> = frames(<integer>)

例

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: linear-gradient(to right,
      rgba(0, 0, 0, .9) 25%,
      rgba(0, 0, 0, .1) 50%,
      rgba(0, 0, 0, .9) 75%);
  color: white;
  height: 100%;
  width: 20%;

  -webkit-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%; }  }
        @keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }

これ以外の例は CSS アニメーションを参照してください。

アクセシビリティの考慮事項

点滅を伴うアニメーションは、注意欠陥障害 (ADHD) のような認知障害を持つ人々に問題を起こす可能性があります。加えて、特定の種類の動きが、前庭障害、てんかん、片頭痛、痙攣感受性などの引き金になることもあります。

アニメーションを停止したり無効にしたりする仕組みを、できれば Reduced Motion Media Query を使用して、アニメーションがない操作の設定を表明したユーザーの希望を叶えるように作成することができます。

仕様書

仕様書 状態 備考
CSS Animations
animation の定義		 草案 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 43
完全対応 43
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 12
完全対応 12
完全対応 12
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox 完全対応 16
完全対応 16
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
完全対応 44
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
完全対応 5
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 完全対応 10Opera 完全対応 30
完全対応 30
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
未対応 12.1 — 15
未対応 12 — 15
接頭辞付き
接頭辞付き -o- のベンダー接頭辞が必要
Safari 完全対応 あり
完全対応 あり
完全対応 4
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 あり
完全対応 あり
完全対応 2
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 The animation-fill-mode property is not supported in Android browsers below 2.3.
Chrome Android 完全対応 43
完全対応 43
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge Mobile 完全対応 あり
完全対応 あり
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox Android 完全対応 16
完全対応 16
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
完全対応 44
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
完全対応 5
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
Opera Android 完全対応 30
完全対応 30
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
未対応 12.1 — 14
未対応 12 — 14
接頭辞付き
接頭辞付き -o- のベンダー接頭辞が必要
Safari iOS 完全対応 あり
完全対応 あり
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android 完全対応 4.0
完全対応 4.0
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要

凡例

完全対応  
完全対応
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

Quantum CSS のメモ

  • Gecko には、画面上でオフスクリーン要素をアニメーションさせたとき、遅延を指定すると、 Windows など一部のプラットフォームで再描画しないというバグがあります (バグ 1383239)。これは Firefox の新しい並列 CSS エンジン（Quantum CSS または Stylo と呼ばれており、 Firefox 57 でリリースする計画です）で修正されています。
  • 他の Gecko のバグとして、 <details> 要素が open 属性を使用しても、アニメーションが有効になっていると既定で開かないというものがあります (バグ 1382124)。 Quantum CSS では修正されています。
  • さらに他のバグとして、 em の単位を使用してアニメーションする要素の親の font-size を変更しても影響されないというものがあります (バグ 1254424)。 Quantum CSS では修正されています。

関連情報

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

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