animation

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

* Some parts of this feature may have varying levels of support.

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

試してみましょう

animation: 3s ease-in 1s infinite reverse both running slide-in;

animation: 3s linear 1s infinite running slide-in;

animation: 3s linear 1s infinite alternate slide-in;

animation: 0.5s linear 1s infinite alternate slide-in;

<section class="flex-column" id="default-example">
  <div id="example-element"></div>
</section>

#example-element {
  background-color: #1766aa;
  margin: 20px;
  border: 5px solid #333;
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

@keyframes slide-in {
  from {
    margin-left: -20%;
  }
  to {
    margin-left: 100%;
  }
}

構成要素のプロパティ

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

構文

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

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

/* 2 つのアニメーション */
animation:
  3s linear slide-in,
  3s ease-out 5s slide-out;

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

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

メモ: animation-timeline、animation-range-start、animation-range-end は、現在の実装ではリセットのみであるため、現在のところこのリストには掲載されていません。つまり、 animation があると、それ以前に宣言した animation-timeline の値は auto に、それ以前に宣言した animation-range-start と animation-range-end の値は normal にリセットされますが、これらのプロパティを animation で設定することはできません。 CSS スクロール駆動アニメーション を作成する場合、 animation の一括指定を宣言した後に、これらのプロパティを宣言しなければ効果を得ることはできません。

値

<single-easing-function>

推移の形式を決定します。値は <easing-function> で利用できる値のいずれかでなければなりません。

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

解説

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

それぞれのアニメーション定義内の他の値の順序も、 animation-name 値と他の値を判別するために重要です。もし animation の一括指定の値が animation-name 以外のアニメーションプロパティの値として解釈できる場合、その値は最初のプロパティに適用され、 animation-name には適用されません。このため、 animation 一括指定を使用する場合は、値のリストの最後の値として animation-name の値を指定することをお勧めします。これは、animation 一括指定を使用してカンマで区切られた複数のアニメーションを指定する場合でも同様です。

アニメーションを適用するにはアニメーション名を設定する必要がありますが、animation 一括指定の値はすべてオプションで、それぞれの個別指定の animation 成分の既定値が設定されます。 animation-name の初期値は none です。つまり、animation 一括指定のプロパティで animation-name の値が宣言されていない場合、どのプロパティにもアニメーションは適用されません。

animation-duration 値が animation 一括指定プロパティにおいて除外された場合、このプロパティの値は 0s が既定値となります。この場合、アニメーションは発生しますが（animationStart と animationEnd イベントは発行されますが）、アニメーションは表示されません。

animation-fill-mode の値が forwards の場合、アニメーションするプロパティは、設定された will-change プロパティの値に記載されているかのように動作します。アニメーション中に新しい重ね合わせコンテキストが作成された場合、アニメーションの完了後も、対象要素は重ね合わせコンテキストを保持します。

アクセシビリティ

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

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

公式定義

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

形式文法

animation = 
  <single-animation>#  

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

<easing-function> = 
  <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()>  

<cubic-bezier-easing-function> = 
  ease              |
  ease-in           |
  ease-out          |
  ease-in-out       |
  <cubic-bezier()>  

<step-easing-function> = 
  step-start  |
  step-end    |
  <steps()>   

<linear()> = 
  linear( [ <number> && <percentage>{0,2} ]# )  

<cubic-bezier()> = 
  cubic-bezier( [ <number [0,1]> , <number> ]#{2} )  

<steps()> = 
  steps( <integer> , <step-position>? )  

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

例

メモ: CSS ボックスモデル プロパティのアニメーションは推奨されません。ボックスモデルのプロパティをアニメーションさせると、本質的に CPU に負荷がかかります。

日の出

ここでは、水色の空を昇る黄色い太陽をアニメーション化しています。太陽は ビューポートの中心まで上昇してから、下落して見えなくなります。

html
<div class="sun"></div>
css
:root {
  overflow: hidden; /* 地平線下の部分の太陽を隠す */
  background-color: lightblue;
  display: flex;
  justify-content: center; /* 太陽を背景の中心に配置する */
}

.sun {
  background-color: yellow;
  border-radius: 50%; /* 丸い背景を作成 */
  height: 100vh; /* 太陽をビューポートの大きさにする */
  aspect-ratio: 1 / 1;
  animation: 4s linear 0s infinite alternate sun-rise;
}

@keyframes sun-rise {
  from {
    /* ビューポートを通過して太陽を下に押し下げる */
    transform: translateY(110vh);
  }
  to {
    /* 太陽を既定の位置に戻す */
    transform: translateY(0);
  }
}

複数のプロパティのアニメーション

前回の例の太陽のアニメーションに追加して、太陽が昇ったり沈んだりするときの色を変える 2 つ目のアニメーションを追加します。太陽が地平線の下にあるときは暗い赤色から始まり、上に近づくにつれて明るいオレンジ色に変わります。

html
<div class="sun"></div>
css
:root {
  overflow: hidden;
  background-color: lightblue;
  display: flex;
  justify-content: center;
}

.sun {
  background-color: yellow;
  border-radius: 50%;
  height: 100vh;
  aspect-ratio: 1 / 1;
  animation: 4s linear 0s infinite alternate animating-multiple-properties;
}

/* 単一のアニメーションで複数のプロパティをアニメーションさせることができる */
@keyframes animating-multiple-properties {
  from {
    transform: translateY(110vh);
    background-color: red;
    filter: brightness(75%);
  }
  to {
    transform: translateY(0);
    background-color: orange;
    /* 設定されていないプロパティ、つまり 'filter' は既定値に戻る */
  }
}

複数のアニメーションの適用

水色の背景に昇ったり沈んだりする太陽。太陽は徐々に虹色に回転します。太陽の位置と色のタイミングは独立しています。

html
<div class="sun"></div>
css
:root {
  overflow: hidden;
  background-color: lightblue;
  display: flex;
  justify-content: center;
}

.sun {
  background-color: yellow;
  border-radius: 50%;
  height: 100vh;
  aspect-ratio: 1 / 1;
  /* 複数のアニメーションをカンマで区切り、各アニメーションの引数を個別に設定 */
  animation:
    4s linear 0s infinite alternate rise,
    24s linear 0s infinite psychedelic;
}

@keyframes rise {
  from {
    transform: translateY(110vh);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes psychedelic {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}

複数のアニメーションのカスケード

ここでは、水色の背景に黄色の太陽があります。太陽はビューポートの左側と右側の間で跳ね返ります。上昇アニメーションを定義しても、太陽はビューポートに残ります。上昇アニメーションの座標変換プロパティは、跳ね返るアニメーションによって「上書き」されます。

html
<div class="sun"></div>
css
:root {
  overflow: hidden;
  background-color: lightblue;
  display: flex;
  justify-content: center;
}

.sun {
  background-color: yellow;
  border-radius: 50%;
  height: 100vh;
  aspect-ratio: 1 / 1;
  /*
    カスケードの後半で宣言されたアニメーションは、
    それ以前に宣言されたアニメーションのプロパティを上書きする
  */
  /* 跳ね返りは上昇の座標変換を「上書き」するため、太陽は水平方向にしか移動しない */
  animation:
    4s linear 0s infinite alternate rise,
    4s linear 0s infinite alternate bounce;
}

@keyframes rise {
  from {
    transform: translateY(110vh);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes bounce {
  from {
    transform: translateX(-50vw);
  }
  to {
    transform: translateX(50vw);
  }
}

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

仕様書

Specification
CSS Animations Level 1
# animation

ブラウザーの互換性

関連情報