HTML Living Standard　　第２部 CSS　９ アニメーション

 

９　アニメーション

アニメーションについて説明します。

９．１　　アニメーション名　(animation-name)

要素にキーフレームアニメーションを適用する場合の、アニメーション名を指定する際に使用します。

animation 系プロパティで要素にキーフレームアニメーションを適用する際には、@keyframes ルールでキーフレームを定義する必要があります。 キーフレームでは、アニメーション開始時点（from）のスタイルと終了時点（to）、 さらに、必要に応じてその進行途中（0～100%）のスタイルを指定します。

animation-name:属性値

@keyframes ルールで定義されたアニメーション名を指定する。

属性値説明
noneアニメーション効果を指定しない（規定値）
アニメーション名カンマ（ , ）区切りでアニメーション名のリストを指定する
記述例
スタイルシート
  @keyframes anime {
    from {width: 50px; height: 50px; background-color: aqua;}
    to {width: 200px; height: 50px; background-color: lightgreen;}
  }
  div {
    animation-iteration-count:infinite;
    animation-duration:5s;
  }

ボディ
<div style="animation-name:anime;">アニメーション</div>

@keyframes の from から to までの変化をアニメーションします。

表示例

９．２　　再生時間　(animation-duration)

アニメーション1回分の再生時間を指定します。

animation-duration:属性値

アニメーション1回分の再生時間を指定する。

属性値説明
時間数値＋単位（s、ms）。animation-name で複数のアニメーションを指定した場合、カンマで区切って複数指定する。
記述例
スタイルシート
  @keyframes anime1 {
    from {color:black;}
    50% {color:white;}
    to {color:black;}
  }
  @keyframes anime2 {
    from {background-color:lightgreen;}
    to {background-color:aqua;}
  }
  div {
    width:120px;
    height:20px;
    animation-iteration-count:infinite;
    animation-name:anime1,anime2;
  }

ボディ
<div style="animation-duration:5s,10s;">アニメーション</div>

文字色をを変化させる anime1 と背景色を変化させる anime2 をアニメーションしていますが、anime1 は 5秒で anime2 は 10秒で変化します。

表示例

９．３　　変化のタイミング　(animation-timing-function)

アニメーションの変化のタイミングを指定します。

animation-timing-function:属性値

アニメーションの変化のタイミングを指定する。

属性値説明
linear最初から最後まで同じ速さで変化する。cubic-bezier(0.25, 0.1, 0.25, 1.0)と同じ
ease最初は緩やかに、徐々に加速し、後半ゆっくり変化する。cubic-bezier(0, 0, 1.0, 1.0)と同じ（規定値）
ease-in最初ゆっくり、後半すばやく変化する。cubic-bezier(0.42, 0, 1.0, 1.0)と同じ
ease-out最初すばやく、後半ゆっくり変化する。cubic-bezier(0, 0, 0.58, 1.0)と同じ
ease-in-out始めは緩やかに、途中で加速し、最後また緩やかに変化する。cubic-bezier(0.42, 0, 0.58, 1.0)と同じ
cubic-bezier(x1, y1, x2, y2)[0.0, 0.0] から始まり、[x1, y1], [x2, y2] を基準点にして [1.0, 1.0] に到達する三次ベジェ曲線に従い変化する。
step-start最初からアニメーション終了時の状態にする。steps(1, start)と同じ
step-end最後に一瞬でアニメーション終了時の状態にする。steps(1, end)と同じ
steps(ステップ数, start か end)時間的変化を、複数のステップに分けて行う。
start：開始直後に 1段階目の変化が発生、end：最初のインターバル経過後に 1段階目の変化が発生（規定値：end）
記述例
スタイルシート
    @keyframes anime {
      from {width: 0px;}
      80% {width: 500px;}
      to {width: 500px;}
    }
    div {
      height:20px;
      margin: 5px;
      padding: 2px;
      background: aquamarine;
      white-space: nowrap;
      font-weight: bold;
      animation: anime 5s infinite both;
    }

ボディ
<div style="animation-timing-function:linear;">linear</div>
<div style="animation-timing-function:ease;">ease</div>
<div style="animation-timing-function:ease-in;">ease-in</div>
<div style="animation-timing-function:ease-out;">ease-out</div>
<div style="animation-timing-function:ease-in-out;">ease-in-out</div>
<div style="animation-timing-function:cubic-bezier(0.1, 2.3, 0.3, 0.3);">cubic-bezier</div>
<div style="animation-timing-function:step-start;">step-start</div>
<div style="animation-timing-function:step-end;">step-end</div>
<div style="animation-timing-function:steps(3, start);">steps</div>
表示例

Safari は、cubic-bezier は機能していない（ease と同じ）ようです。


９．４　　開始遅延　(animation-delay)

アニメーションを開始する時間を指定した時間分遅延させます。

animation-delay:属性値

アニメーションを開始する時間を指定した時間分遅延させる。

属性値説明
時間数値＋単位（s、ms）
記述例
スタイルシート
    @keyframes anime {
      from {width: 50px; background-color: aqua;}
      to {width: 200px; background-color: lightgreen;}
    }
    div {
      height: 50px; 
      animation-duration:5s;
      animation-name:anime;
    }

ボディ
<div style="animation-delay:0s;">０秒後</div>
<div style="animation-delay:1s;">１秒後</div>
<div style="animation-delay:3s;">３秒後</div>

[再実行]ボタンをクリックすると、アニメーションが上から 0秒後、1秒後、3秒後にそれぞれ開始されます。

表示例　　　
再実行


９．５　　繰り返し回数　(animation-iteration-count)

アニメーションを繰り返す回数を指定します。

animation-iteration-count:属性値

アニメーションを繰り返す回数を指定する。

属性値説明
infinite無限に繰り返す。
回数アニメーション繰り返す回数
記述例
スタイルシート
    @keyframes anime {
      from {width: 50px; background-color: aqua;}
      to {width: 200px; background-color: lightgreen;}
    }
    div {
      height: 50px; 
      animation-duration:3s;
      animation-name:anime;
    }

ボディ
<div style="animation-iteration-count:1;">１回</div>
<div style="animation-iteration-count:3;">３回</div>
<div style="animation-iteration-count:5;">５回</div>

[再実行]ボタンをクリックすると、アニメーションが上から 1回、3回、5回それぞれ繰り返されます。

表示例　　　
再実行


９．６　　実施方向　(animation-direction)

アニメーションの実施方向を指定します。

animation-direction:属性値

アニメーションの実施方向を指定する。

属性値説明
normalすべて通常方向に再生（規定値）
reverseすべて逆方向に再生
alternate通常方向、逆方向の順に再生
alternate-reverse逆方向、通常方向の順に再生
記述例
スタイルシート
    @keyframes anime {
      from {width: 50px; background-color: aqua;}
      to {width: 200px; background-color: lightgreen;}
    }
    div {
      height: 50px; 
      animation-duration:3s;
      animation-name:anime;
      animation-iteration-count:infinite;
    }

ボディ
<div style="animation-direction:normal;">normal</div>
<div style="animation-direction:reverse;">reverse</div>
<div style="animation-direction:alternate;">alternate</div>
<div style="animation-direction:alternate-reverse;">alternate-reverse</div>
表示例

Safari は、reverse や alternate-reverse は機能していない（normal と同じ）ようです。


９．７　　開始終了時スタイル　(animation-fill-mode)

アニメーションの開始や終了時のスタイルを指定します。

animation-fill-mode:属性値

アニメーションの開始や終了時のスタイルを指定する。

属性値説明
none開始時、終了時にはアニメーションスタイルは適用されない（規定値）
forwards終了時に、アニメーション終了時のスタイルを適用したままにする
backwards開始時に、アニメーション開始時のスタイルを適用する
both開始時には開始時のスタイルを、終了時には終了時のスタイルを適用する
記述例
スタイルシート
    @keyframes anime {
      from {width: 50px; background-color: aqua;}
      to {width: 200px; background-color: lightgreen;}
    }
    div {
      height: 50px; 
      animation-duration:3s;
      animation-name:anime;
      animation-iteration-count:1;
      animation-delay:3s;
    }

ボディ
<div style="animation-fill-mode:none;">none</div>
<div style="animation-fill-mode:forwards;">forwards</div>
<div style="animation-fill-mode:backwards;">backwards</div>
<div style="animation-fill-mode:both;">both</div>

[再実行]ボタンをクリック後、３秒たってからアニメーションが始まります。backwards と both は、その間アニメーション開始時のスタイルが適用されます。

また、forwards と both は、アニメーション終了時にもそのスタイルが適用されたままになります。

表示例　　　
再実行


９．８　　実行状態　(animation-play-state)

アニメーションの実行状態を指定します。

animation-play-state:属性値

アニメーションの実行状態を指定する。

属性値説明
running再生（規定値）
paused一時停止
記述例
スタイルシート
    @keyframes anime {
      from {width: 50px; background-color: aqua;}
      to {width: 200px; background-color: lightgreen;}
    }
    div {
      height: 50px; 
      animation-duration:3s;
      animation-name:anime;
      animation-direction:alternate;
      animation-iteration-count:infinite;
    }

ボディ
<div style="animation-play-state:paused;">paused</div>

[再生]ボタンと[一時停止]ボタンによって、アニメーションの実行状態を変更します。

表示例

９．９　　アニメーション　(animation)

アニメーションのいろいろな設定をまとめて指定します。

animation:属性値 属性値 属性値 ...[, 属性値 属性値 属性値 ...[, ...]]

アニメーションのいろいろな設定をまとめてセットで指定する。

なお、 , で区切れば複数のセットを指定できる。

属性値説明
アニメーション名animation-name の値
再生時間animation-duration の値
変化のタイミングanimation-timing-function の値
開始遅延animation-delay の値
繰り返し回数animation-iteration-count の値
実施方向animation-direction の値
開始終了時スタイルanimation-fill-mode の値
実行状態animation-play-state の値

個々の値は省略可能で順序も変更可能だが、時間と解釈される値のみは、一つ目が animation-duration、二つ目が animation-delay として解釈される。

下の例は二つともアニメーションが２種類指定されています。

ただし、一つ目の例は、開始遅延が指定されていませんので、四角形が横に長くなるのと縦に長くなるのが同時に実行されます。

それに対して二つ目の例は、縦に長くなるアニメーションの開始遅延が３秒と指定されていますので、四角形が横に長くなった後に縦に長くなります。

記述例
スタイルシート
    @keyframes anime1 {
      from {width: 50px;}
      to {width: 200px;}
    }
    @keyframes anime2 {
      from {height: 20px;}
      to {height: 80px;}
    }
    div {
      height: 50px; 
    }

ボディ
<div style="animation:anime1 3s 1 forwards ease-out, anime2 3s 1 forwards ease-out;">同時実行</div>
<div style="animation:anime1 3s 0s 1 forwards ease-out, anime2 3s 3s 1 forwards ease-out;">順次実行</div>
表示例
再実行


９．１０　　トランジション属性　(transition-property)

トランジションを適用する CSS 属性名を指定します。

transition-property:属性名[, 属性名, 属性名, ...]

トランジションを適用する CSS 属性名を指定する。

属性値説明
all変化を適用できる属性すべてが変化する（規定値）
noneどの属性も変化しない
CSS 属性名変化させる属性名のリストをカンマ（ , ）区切りで指定する
記述例
スタイルシート
    div {
      background-color:orange;
      width:200px;
      height:50px; 
      transition-duration:1s;
    }
    div:hover {
      background-color:yellow;
      width:300px;
      height:100px; 
    }

ボディ
<div style="transition-property:background-color, width, height;">トランジション</div>

オレンジ色の矩形にマウスを重ねてください。

幅 200px、高さ 50px、オレンジ色 が、幅 300px、高さ 100px、黄色 に変化します。マウスを外せば元に戻ります。

表示例

９．１１　　トランジション時間　(transition-duration)

変化に掛かる時間を指定します。

transition-duration:属性値

トランジションを適用する CSS プロパティ名を指定する。

属性値説明
時間遷移するのにかかる時間（単位は s、ms）
記述例
スタイルシート
    div {
      background-color:orange;
      width:200px;
      height:50px; 
      transition-property:background-color, width, height;
    }
    div:hover {
      background-color:yellow;
      width:300px;
      height:100px; 
    }

ボディ
<div style="transition-duration:3s;">トランジション</div>

オレンジ色の矩形にマウスを重ねてください。

３秒かけて変化します。マウスを外せば元に戻ります。

表示例

９．１２　　トランジションのタイミング　(transition-function)

トランジション効果の作用を受ける CSS 属性の、中間状態の値を算出するタイミング関数を記述するために使用されます。

transition-function:属性値

中間状態の値を算出するタイミング関数を指定する。

属性値説明
linear最初から最後まで同じ速さで変化する。
ease最初は緩やかに、徐々に加速し、後半ゆっくり変化する。（規定値）
ease-in最初ゆっくり、後半すばやく変化する。
ease-out最初すばやく、後半ゆっくり変化する。
ease-in-out始めは緩やかに、途中で加速し、最後また緩やかに変化する。
step-start最初からアニメーション終了時の状態にする。
step-end最後に一瞬でアニメーション終了時の状態にする。
steps(ステップ数, start か end)時間的変化を、複数のステップに分けて行う。
start：開始直後に 1段階目の変化が発生、end：最初のインターバル経過後に 1段階目の変化が発生（規定値：end）
記述例
スタイルシート
    div {
      background-color:orange;
      width:200px;
      height:30px; 
      transition-property:background-color, width;
      transition-duration: 3s;
    }
    div:hover {
      background-color:yellow;
      width:500px;
    }

ボディ
<div style="transition-duration:3s;">トランジション</div>

オレンジ色の矩形にマウスを重ねてください。

transition-function によっていろいろな変化をします。マウスを外せば元に戻ります。

表示例

９．１３　　トランジションの開始遅延　(transition-delay)

トランジションを開始する時間を指定した時間分遅延させます。

transition-delay:属性値

トランジションを開始する時間を指定した時間分遅延させる。

属性値説明
時間遷移するのにかかる時間（単位は s、ms）（規定値：0s）
記述例
スタイルシート
    div {
      background-color:orange;
      width:200px;
      height:30px; 
      transition-property:background-color, width;
      transition-duration: 3s;
    }
    div:hover {
      background-color:yellow;
      width:500px;
    }

ボディ
<div style="transition-delay:0s;">０秒後</div>
<div style="transition-delay:1s;">１秒後</div>
<div style="transition-delay:3s;">３秒後</div>

オレンジ色の矩形にマウスを重ねてください。

transition-delay によって変化の開始時間が異なります。マウスを外せば元に戻ります。

表示例

９．１４　　トランジション　(transition)

トランジションのいろいろな設定をまとめて指定します。

transition:属性 時間 タイミング 開始遅延[, 属性 時間 タイミング 開始遅延, ...]

トランジションのいろいろな設定を空白で区切ってまとめて指定する。変化させる CSS 属性名が複数あれば、さらにカンマ（ , ）区切りで続けて指定する

なお、時間が２つ指定されていたときには、一つ目がトランジション時間、二つ目がトランジションの開始遅延であるとみなされます。

属性値説明
トランジション属性transition-property の値（規定値：none）
トランジション時間animation-duration の値（規定値：0s）
トランジションのタイミングtransition-timing-function の値（規定値：ease）
トランジションの開始遅延transition-delay の値（規定値：0s）
記述例
スタイルシート
    div {
      background-color:orange;
      width:200px;
      height:50px; 
    }
    div:hover {
      background-color:yellow;
      width:500px;
      height:100px; 
    }

ボディ
<div style="transition:background-color 5s ease-out, width ease-in-out 3s 2s, height ease 4s 1s;">トランジション</div>

オレンジ色の矩形にマウスを重ねてください。

いろいろな変化が起こります。マウスを外せば元に戻ります。

表示例