アニメーション

アニメーションは、インタラクティブな要素を強調し、デザインに興味と楽しさを加えるための優れた方法です。このモジュールでは CSS を使用してアニメーション効果を追加し

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

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

キーフレームとは

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

たとえば、「ヘルパー」ドットが点滅している場合のタイムラインは、以下のようになります。アニメーションは 1 秒間実行され、2 つの状態があります。

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

@keyframes

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

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

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

最初の重要な部分は、キーフレーム ルールの名前であるカスタム識別子（custom-ident）です。この例の ID は my-animation です。カスタム識別子は関数名と同じように機能し、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 プロパティ

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

animation-duration

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

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

animation-timing-function

アニメーションで自然な動きを再現するには、各ポイントでのアニメーションの速度を計算する時間関数を使用できます。計算された値は曲線的になっていることが多いため、animation-duration の間にさまざまな速度でアニメーションが実行され、ブラウザが @keyframes で定義された値を超える値を計算すると、要素が弾んでいるように見えます。

CSS にはプリセットとして使用可能なキーワードがいくつかあります（linear、ease、ease-in、ease-out、ease-in-out）。これは、animation-timing-function の値として使用されます。

.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);
}

1 つ目の引数はステップ数です。キーフレームの数がステップと同じ場合、各キーフレームはステップの正確な時間にわたって順番に再生されます。状態間の遷移はありません。キーフレームがステップ数より少ない場合、ブラウザは 2 番目の引数に応じて、キーフレーム間にステップを追加します。

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

animation-iteration-count

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

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

アニメーションをループさせるには、繰り返し回数を infinite に設定します。このレッスンの冒頭の点滅アニメーションの仕組みは次のとおりです。

animation-direction

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

Animation-direction を使用すると、キーフレーム上でタイムラインが動作する方向を設定できます。これには次の値を設定します。

• normal: デフォルト値（転送）。
• reverse: タイムライン上を逆方向に実行します。
• alternate: アニメーションの反復処理ごとに、タイムラインが順方向と逆方向に切り替わります。
• alternate-reverse: alternate と似ていますが、アニメーションはタイムラインを逆方向にした状態で開始します。

animation-delay

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

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

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

animation-play-state

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

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

animation-fill-mode

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

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

理解度をチェックする

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