アニメーション

アニメーションは、インタラクティブな要素をハイライト表示し、デザインに興味や楽しさを加えるのに最適な方法です。このモジュールでは、CSS を使用してアニメーション エフェクトを追加し、制御する方法について説明します。

インターフェース上に小さなヘルパーが表示され、クリックすると、そのセクションに関する有用な情報が表示されます。多くの場合、通知には点滅するアニメーションが表示され、情報があり、操作する必要があることを軽く知らせます。しかし、CSS ではどのようにしてこれを行っているのでしょうか。

CSS では、CSS アニメーションを使用してこのタイプのアニメーションを作成できます。CSS アニメーションでは、キーフレームを使用してアニメーション シーケンスを設定できます。アニメーションには、単純な 1 つの状態のアニメーションだけでなく、複雑な時間ベースのシーケンスも使用できます。

キーフレームとは

アニメーション ソフトウェアや CSS など、何かをアニメーション化するためのツールでは、キーフレームを使用して、タイムラインに沿ってアニメーションの状態をタイムスタンプに割り当てることができます。

コンテキストとして「パルサー」を見てみましょう。 アニメーション全体は 1 秒間実行され、2 つの状態で実行されます。

1 秒間のパルサー アニメーションの状態

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

前と同じ図。今回はキーフレーム付き。

@keyframes

対応ブラウザ

  • 43
  • 12
  • 16
  • 9

ソース

キーフレームとは何かを理解したところで、CSS の @keyframes ルールの仕組みを理解しましょう。2 つの状態を持つ基本的なルールは次のとおりです。

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

まず注意すべきなのは、カスタム ID（カスタム ID）です。わかりやすい表現で、キーフレーム ルールの名前にもなります。このルールの ID は my-animation です。 カスタム ID は関数名と同様に機能します。これにより、関数モジュールで学習したように、CSS コードの別の場所でキーフレーム ルールを参照できます。

キーフレーム ルール内で、from と to は 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 プロパティ

対応ブラウザ

  • 43
  • 12
  • 16
  • 9

ソース

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

animation-duration

対応ブラウザ

  • 43
  • 12
  • 16
  • 9

ソース

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

animation-duration プロパティは、@keyframes タイムラインの長さを定義します。時刻の値を指定する必要があります。 デフォルトは 0 秒です。つまり、アニメーションは引き続き実行されますが、すぐに表示されてしまうことがあります。負の時間値は追加できません。

animation-timing-function

対応ブラウザ

  • 43
  • 12
  • 16
  • 9

ソース

アニメーションの自然な動きを再現するには、各ポイントでのアニメーションの速度を計算する時間関数を使用します。多くの場合、計算値はカーブしているため、アニメーションは animation-duration の過程で可変速度で実行されます。また、@keyframes で定義された値を超える値が計算されると、要素が弾むように見えます。

CSS ではプリセットとして複数のキーワードを使用できます。これは animation-timing-function の値として使用されます。linear、ease、ease-in、ease-out、ease-in-out。

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

イージングは、速度のモデル化に使用されるベジエ曲線を使用して計算されるため、値はイージング関数によって曲線のように見えます。ease などのタイミング関数のキーワードは、それぞれ事前定義されたベジエ曲線を参照します。CSS では、cubic-bezier() 関数を使用してベジェ曲線を直接定義できます。この関数は x1、y1、x2、y2 の 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);
}

最初の引数はステップ数です。 ステップを 10 として定義し、キーフレームが 10 個ある場合、各キーフレームは状態を遷移することなく、正確な時間にわたって順番に再生されます。ステップに必要なキーフレームの数が十分でない場合、2 番目の引数に応じてキーフレーム間のステップが追加されます。

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

animation-iteration-count

対応ブラウザ

  • 43
  • 12
  • 16
  • 9

ソース

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

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

infinite キーワードを使用してアニメーションをループさせることができます。このレッスンの冒頭の「Pulser」デモはこの様に機能します。

animation-direction

対応ブラウザ

  • 43
  • 12
  • 16
  • 9

ソース

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

Animation-direction では、キーフレーム上をタイムラインで実行する方向を設定できます。

  • normal: デフォルト値（転送）。
  • reverse: タイムライン上を逆方向に実行します。
  • alternate: アニメーションの反復処理ごとに、タイムラインは前後に順番に動きます。
  • alternate-reverse: alternate の逆方向。

animation-delay

対応ブラウザ

  • 43
  • 12
  • 16
  • 9

ソース

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

animation-delay プロパティは、アニメーション開始までの待機時間を定義します。animation-duration プロパティと同様に、時間値を受け取ります。

animation-duration プロパティとは異なり、負の値として定義できます。負の値を設定すると、@keyframes のタイムラインはその時点で開始されます。 たとえば、アニメーションの長さが 10 秒で、animation-delay を -5s に設定すると、タイムラインの中間から開始します。

animation-play-state

対応ブラウザ

  • 43
  • 12
  • 16
  • 9

ソース

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

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

animation-fill-mode

対応ブラウザ

  • 43
  • 12
  • 16
  • 9

ソース

animation-fill-mode プロパティは、アニメーションの開始前または終了後に @keyframes タイムライン内で保持する値を定義します。デフォルト値は none です。この場合、アニメーションが完了すると、タイムラインの値は破棄されます。他のフォーマットは次のとおりです。

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

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 アニメーションの名前またはカスタム ID では、大文字と小文字が区別されますか？

正しい
🎉
誤り
CSS では 2 つのアニメーションに同じ名前を付けることはできませんが、SWOOP と swoop を共存することは可能です。

キーワード from と to は、

start、end。
もう一度考えてみましょう。
0%、100%。
from は 0% と同じで、to は 100% と同じです。
0、1
もう一度考えてみましょう。

animation-timing-function は、

動的なタイミング
もう一度考えてみましょう。
Delay
もう一度考えてみましょう。
Easing
🎉

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

1
ブラウザは要素の現在の状態をキーフレームとして受け取るため、少なくとも 1 つのキーフレームが必要です。
2
もう一度考えてみましょう。
3
もう一度考えてみましょう。
4
もう一度考えてみましょう。