アニメーション

インターフェースに小さなヘルパーが表示され、クリックするとそのセクションに関する有用な情報が提供されることがあります。多くの場合、情報があることと操作が必要であることをさりげなく伝えるために、点滅するアニメーションが使用されます。このモジュールでは、CSS を使用してこれらのヘルパーやその他のアニメーションを作成する方法について説明します。

CSS を使用して、キーフレームを含むアニメーション シーケンスを設定できます。これらのシーケンスは、基本的な 1 つの状態のアニメーションでも、複雑な時間ベースのシーケンスでもかまいません。

キーフレームとは

ほとんどのアニメーション ツールでは、キーフレームは、タイムライン上のタイムスタンプにアニメーション状態を割り当てるために使用されるメカニズムです。

たとえば、点滅する「ヘルパー」ドットのタイムラインは次のとおりです。アニメーションは 1 秒間実行され、2 つの状態があります。

1 秒間のパルス発生アニメーションの状態

これらのアニメーション状態はそれぞれ、開始と終了の特定のポイントがあります。これらは、キーフレームを使用してタイムラインにマッピングします。

先ほどの図にキーフレームを追加したものです。

@keyframes

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

CSS @keyframes は、アニメーション キーフレームと同じコンセプトに基づいています。

2 つの状態の例を次に示します。

@keyframes my-animation {
  from {
    transform: translateY(20px);
  }
  to {
    transform: translateY(0px);
  }
}

最初の重要な部分は、カスタム識別子(custom-identです。これは、キーフレーム ルールの名前です。この例の ID は my-animation です。カスタム識別子は関数名のように機能し、CSS コードの他の場所でキーフレーム ルールを参照できます。

キーフレーム ルール内の fromto は、アニメーションの開始と終了を表す 0%100% を表すキーワードです。同じルールを次のように再作成できます。

@keyframes my-animation {
    0% {
        transform: translateY(20px);
    }
    100% {
        transform: translateY(0px);
    }
}

期間に沿って、任意の数のポジションを追加できます。パルス ヘルパーの例では、2 つの状態があり、2 つのキーフレームに変換されます。つまり、キーフレーム ルール内に 2 つの位置があり、これらのキーフレームの変化を表しています。

@keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.4;
  }
}

animation プロパティ

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

CSS ルールで @keyframes を使用するには、さまざまなアニメーション プロパティを個別に定義するか、animation 省略形プロパティを使用します。

animation-duration

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

.my-element {
    animation-duration: 10s;
}

animation-duration プロパティは、@keyframes タイムラインの長さを時間値として定義します。デフォルトは 0 秒です。つまり、アニメーションは実行されますが、あまりにも速すぎて認識できません。負の時間値は使用できません。

animation-timing-function

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

アニメーションで自然な動きを再現するには、各ポイントのアニメーションの速度を計算するタイミング関数を使用します。計算された値は多くの場合曲線状であるため、animation-duration の期間にわたってアニメーションが変速で実行され、ブラウザが @keyframes で定義されている値を超える値を計算すると、要素がバウンドするように見えます。

CSS では、animation-timing-function の値として使用できるプリセットとして、lineareaseease-inease-outease-in-out のキーワードがいくつか用意されています。

.my-element {
    animation-timing-function: ease-in-out;
}

イージング関数の値は曲線状に見えます。これは、イージングが速度のモデリングに使用される関数の一種であるベジェ曲線を使用して計算されるためです。各タイミング関数キーワード(ease など)は、事前定義されたベジェ曲線を参照します。CSS では、cubic-bezier() 関数を使用してベジェ曲線を直接定義できます。この関数は、x1y1x2y2 の 4 つの数値を受け入れます。

.my-element {
    animation-timing-function: cubic-bezier(.42, 0, .58, 1);
}

これらの値は、X 軸と Y 軸に沿って曲線の各部分をプロットします。

進行状況と時間のグラフにベジェ曲線を表示する

ベジェ曲線を理解するのは複雑です。Lea Verou によるこのジェネレータなどのビジュアル ツールは非常に便利です。

steps イージング関数

カーブではなく区切りごとに移動することで、アニメーションをより細かく制御したい場合があります。steps() イージング関数を使用すると、タイムラインを同じ時間間隔の定義された区間に分割できます。

.my-element {
    animation-timing-function: steps(10, end);
}

最初の引数はステップ数です。キーフレームの数がステップ数と同じである場合、各キーフレームは、状態間の遷移なしで、ステップの正確な時間だけ順番に再生されます。キーフレーム数がステップ数より少ない場合は、2 番目の引数に応じてキーフレーム間にステップが追加されます。

2 つ目の引数は方向です。デフォルトの end に設定されている場合、ステップはタイムラインの終了時に終了します。start に設定すると、アニメーションの最初のステップは開始するとすぐに完了します。つまり、end よりも 1 ステップ早く終了します。

animation-iteration-count

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

.my-element {
    animation-iteration-count: 10;
}

animation-iteration-count プロパティは、アニメーション中に @keyframes タイムラインを実行する回数を定義します。デフォルトでは 1 です。つまり、アニメーションはタイムラインの終点に達すると停止します。この値は負の数にできません。

アニメーションをループさせるには、反復処理回数を infinite に設定します。これが、このレッスンの冒頭の脈動アニメーションの仕組みです。

animation-direction

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

.my-element {
    animation-direction: reverse;
}

animation-direction を使用して、タイムラインがキーフレーム上で実行される方向を設定できます。この値には次の値を指定できます。

  • normal: デフォルト値(前方)。
  • reverse: タイムラインを後方に再生します。
  • alternate: アニメーションの反復処理ごとに、タイムラインは前方と後方の実行を交互に行います。
  • alternate-reverse: alternate と同様ですが、アニメーションはタイムラインの逆再生から開始されます。

animation-delay

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

.my-element {
    animation-delay: 5s;
}

animation-delay プロパティは、アニメーションを開始する前にブラウザが待機する時間を定義します。animation-duration プロパティと同様に、時間値を受け入れます。

animation-duration とは異なり、animation-delay は負の値として定義できます。これにより、アニメーションはタイムラインの対応するポイントから開始されます。たとえば、アニメーションの長さが 10 秒で、animation-delay-5s に設定すると、アニメーションはタイムラインの半分から開始されます。

animation-play-state

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

.my-element:hover {
    animation-play-state: paused;
}

animation-play-state プロパティを使用すると、アニメーションの再生と一時停止を行うことができます。デフォルト値は running です。paused に設定すると、アニメーションは一時停止します。

animation-fill-mode

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

animation-fill-mode プロパティは、アニメーションの開始前または終了後に @keyframes タイムラインのどの値を保持するかを定義します。デフォルト値は none です。つまり、アニメーションが完了すると、タイムライン内の値は破棄されます。その他にも次のような対応策があります。

  • forwards: アニメーションの方向に基づいて、最後のキーフレームが保持されます。
  • backwards: 最初のキーフレームは、アニメーションの方向に基づいて保持されます。
  • both: 最初のキーフレームと最後のキーフレームの両方が保持されます。

animation の省略形

各プロパティを個別に定義する代わりに、animation ショートカットで定義できます。これにより、アニメーション プロパティを次の順序で定義できます。

  1. animation-name
  2. animation-duration
  3. animation-timing-function
  4. animation-delay
  5. animation-iteration-count
  6. animation-direction
  7. animation-fill-mode
  8. animation-play-state
.my-element {
    animation: my-animation 10s ease-in-out 1s infinite forwards forwards running;
}

アニメーションを扱う際の考慮事項

ユーザーは、アプリやウェブサイトを操作する際に、オペレーティング システムをモーションの低減を優先するように設定できます。この設定は、prefers-reduced-motion メディアクエリを使用して検出できます。

@media (prefers-reduced-motion) {
  .my-autoplaying-animation {
    animation-play-state: paused;
  }
}

アニメーションを表示しない設定とは限りません。アニメーションを減らす、特に予期しないアニメーションを減らすことを推奨しています。この設定と全体的なパフォーマンスについて詳しくは、アニメーション ガイドをご覧ください。

理解度を確認する

アニメーションに関する知識をテストする

@keyframes アニメーションの名前またはカスタム識別子では大文字と小文字が区別されますか?

いいえ
はい

キーワード fromto は次のキーワードと同じです。

0%100%
01
startend

animation-timing-function は、次のようにも呼ばれます。

遅延
動的タイミング
Easing

@keyframes アニメーションに必要なキーフレームの最小数はいくつですか。

4
1
3
2