animation

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

試してみましょう

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

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

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

アニメーションできるプロパティの説明があります。この説明は言うまでもなく CSS トランジションにも有効です。

構成要素のプロパティ

このプロパティは以下のプロパティの一括指定です。

構文

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

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

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

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

値

<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 で利用できる値の一つでなければなりません。

アクセシビリティの考慮

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

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

公式定義

初期値一括指定の次の各プロパティとして
適用対象すべての要素、::before / ::after 擬似要素
継承なし
計算値一括指定の次の各プロパティとして
アニメーションの種類アニメーション不可

形式文法

animation = 
  <single-animation>#  

<single-animation> = 
  <time>                              ||
  <easing-function>                   ||
  <time>                              ||
  <single-animation-iteration-count>  ||
  <single-animation-direction>        ||
  <single-animation-fill-mode>        ||
  <single-animation-play-state>       ||
  [ none | <keyframes-name> ]         

<easing-function> = 
  linear                          |
  <linear-easing-function>        |
  <cubic-bezier-easing-function>  |
  <step-easing-function>          

<single-animation-iteration-count> = 
  infinite        |
  <number [0,∞]>  

<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>        

<linear-easing-function> = 
  linear( <linear-stop-list> )  

<cubic-bezier-easing-function> = 
  ease                                                |
  ease-in                                             |
  ease-out                                            |
  ease-in-out                                         |
  cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )  

<step-easing-function> = 
  step-start                                |
  step-end                                  |
  steps( <integer> [, <step-position> ]? )  

<linear-stop-list> = 
  [ <linear-stop> ]#  

<step-position> = 
  jump-start  |
  jump-end    |
  jump-none   |
  jump-both   |
  start       |
  end         

<linear-stop> = 
  <number>               &&
  <linear-stop-length>?  

<linear-stop-length> = 
  <percentage>{1,2}

例

台風の目

<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 アニメーションを参照してください。

仕様書

Specification
CSS Animations Level 1
# animation

ブラウザーの互換性

BCD tables only load in the browser

Quantum CSS のメモ

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

関連情報