CSSアニメーションチュートリアル：初心者のための完全ガイド

これは、初心者向けの完全な構文ガイドとインタラクティブなCSSアニメーションのチュートリアルです。 CSSアニメーション仕様のさまざまな部分を学ぶための参照として使用してください。

ブラウザのパフォーマンスは、過去10年間で大きく進歩しました。 レンダリングとパフォーマンスの問題が発生する可能性があるため、Webページにインタラクティブなアニメーションを追加するのは以前ははるかに困難でした。 しかし、最近では、CSSアニメーションをはるかに自由に使用でき、グリッドやフレックスボックスなどのCSS機能と比較して、構文の習得が一般的にはるかに簡単になっています。

W3CCSSアニメーション仕様の一部であるさまざまな機能があります。 他のものより使いやすいものもあります。 このCSSキーフレームアニメーションのチュートリアルでは、さまざまなプロパティのそれぞれを含むすべての構文について説明します。 CSSアニメーションで何が可能かを理解するのに役立つインタラクティブなデモを含めます。

@keyframes構文

すべてのCSSアニメーションには、2つの部分があります。1つ以上のanimation-*プロパティと、 @keyframes -ruleを使用して定義された一連のアニメーションキーフレーム。 @keyframesルールセットの構築に何が入るのかを詳しく見てみましょう。

構文は次のようになります。

 @keyframes moveObject 0% transform: translateX(0); 50% transform: translateX(300px); 100% transform: translateX(300px) scale(1.5);

ここに示すように、 @keyframes -ruleには3つの基本的な部分が含まれています。

• @keyframesルールの後にカスタムアニメーション名が続く
• すべてのキーフレームをラップする中括弧のセット
• 1つ以上のキーフレーム。それぞれにパーセンテージが続き、中括弧で囲まれたルールセットが続きます。

CSSアニメーションチュートリアルのこの最初の例では、 moveObjectという名前でアニメーションを定義しました。 これは、任意の名前にすることができ、大文字と小文字が区別され、CSSのカスタム識別子ルールに従う必要があります。 このカスタム名は、 animation-nameプロパティで使用される名前と一致する必要があります（後で説明します）。

私の例では、アニメーションの各キーフレームをパーセンテージで定義していることに気付くでしょう。 アニメーションに0%と100%に等しいキーフレームが含まれている場合は、代わりにfromキーワードとtoキーワードを使用できます。

 @keyframes moveObject from transform: translateX(0); 50% transform: translateX(300px); to transform: translateX(300px) scale(1.5);

次のインタラクティブなCodePenは、実際の例で上記の構文を使用しています。

デモには、アニメーションをリセットするボタンが含まれています。 これが必要な理由については後で説明します。 ただし、今のところ、このアニメーションには、このアニメーションシーケンスのステップを表す3つのキーフレーム（開始、50％ステップ、および終了（0％、50％、100％））が含まれていることを知っておいてください。 これらはそれぞれ、キーフレームセレクターと呼ばれるものと中括弧を使用して、そのステップでプロパティを定義します。

@keyframes構文について注意すべき点がいくつかあります。

• キーフレームルールセットは任意の順序で配置でき、ブラウザはそれらをパーセンテージで決定された順序で実行します。
• 0％および100％のキーフレームは省略でき、ブラウザはアニメーション化されている要素の既存のスタイルによってこれらを自動的に決定します
• ルールセットが異なる重複キーフレームがある場合（たとえば、変換値が異なる20％の2つのキーフレーム）、ブラウザーは最後のキーフレームを使用します
• 単一のキーフレームセレクターで、コンマを使用して複数のキーフレームを定義できます： 10%, 30% ...
• !importantキーワードはプロパティ値を無効にするため、キーフレームルールセット内のプロパティでは使用しないでください。

このCSSアニメーションチュートリアルの@keyframes構文を十分に理解したので、アニメーション化される要素で定義されているさまざまなアニメーションプロパティを見てみましょう。

ここで取り上げるアニメーションのプロパティは次のとおりです。

アニメーション名プロパティ

前述のように、作成するすべてのCSSアニメーションには、 @keyframes構文に表示される名前を付ける必要があります。 この名前は、 animation-nameプロパティを使用して定義された名前と同じである必要があります。

前のデモのCSSを使用すると、構文は次のようになります。

 .box animation-name: moveObject;

繰り返しますが、私が定義したカスタム名は、 @keyframes at-ruleの名前としても存在する必要があります。そうでない場合、この名前は何もしません。 これは、JavaScriptの関数呼び出しのように考えることができます。 関数自体はコードの@keyframes moveObject部分になりますが、関数呼び出しはanimation-name: moveObjectです。

animation-name ：

• animation-nameの初期値はnoneです。これは、アクティブなキーフレームがないことを意味します。 これは、アニメーションを非アクティブ化するための一種の「トグル」として使用できます。
• 選択した名前では大文字と小文字が区別され、文字、数字、アンダースコア、ハイフンを含めることができます。
• 名前の最初の文字は文字またはハイフンである必要がありますが、ハイフンは1つだけです。
• 名前は、 unset 、 initial 、 inheritなどの予約語にすることはできません。

アニメーション持続時間プロパティ

当然のことながら、 animation-durationプロパティは、アニメーションが開始から終了まで1回実行されるのにかかる時間を定義します。 この値は、以下に示すように、秒またはミリ秒で指定できます。

 .box animation-duration: 2s;

上記は、次と同等です。

 .box animation-duration: 2000ms;

次のCodePenデモで、 animation-durationプロパティの動作を確認できます。 このデモでは、アニメーションの長さを選択できます。 秒またはミリ秒でさまざまな値を入力してから、[ボックスのアニメーション化]ボタンを使用してアニメーションを実行してください。

単位にmsと一緒に小さな数字を使用すると、動きに気付かない場合があります。 ミリ秒を使用している場合は、より高い数値を設定してみてください。

animation-duration使用に関する注意事項：

• 負の値は無効です
• 期間が0s （初期値）に設定されている場合でも、単位を含める必要があります
• 小数値を使用できます（例： 0.8s ）

Animation-Timing-Functionプロパティ

前の2つのプロパティほど意味が明らかではないanimation-timing-functionは、CSSアニメーションの進行方法を定義するために使用されます。 それは最も明確な説明ではないかもしれませんが、構文は明確にするのに役立つかもしれません。

宣言は次のようになります。

 .box animation-timing-function: linear;

このプロパティは、次のキーワード値を受け入れます。

• ease （初期値）
• ease-in
• ease-out
• ease-in-out
• linear
• step-start
• step-end

ほとんどの値は名前で比較的簡単に把握できますが、次のインタラクティブなデモを使用すると、値の違いを確認できます。

select入力を使用して、7つのキーワード値の1つを選択します。 ease-*値は、さまざまな方法でアニメーションを「イーズ」することに注意してください。 線形値はずっと一貫しています。

animation-timing-functionプロパティは、次の関数も受け入れます。

• cubic-bezier() –コンマで区切られた4つの数値を引数として受け入れます
• Steps steps() –コンマで区切られた数値と「ジャンプ項」の2つの値を引数として受け入れます

キーワード値step-startおよびstep-endは、それぞれ値steps(1, jump-start)およびsteps(1, jump-end)と同等です。

cubic-bezier()に関しては、次のインタラクティブなデモが関数をもう少しよく理解するのに役立つかもしれません。

デモでは、 cubic-bezier()関数で4つの引数を設定できることに注意してください。 引数のうち2つは負であり、2つは0から1までの10進値に制限されます。これらのタイプのタイミング関数がどのように機能するかについての適切な説明については、この記事またはこのインタラクティブツールを確認してください。

一方、 steps()関数は、次の2つの引数を受け入れます。

• アニメーションの単一サイクルに沿った等しい「停止」を表す整数。
• アニメーションが特定の間隔で「保持」されるかどうかを決定する「ジャンプターム」と呼ばれるオプションのキーワード

繰り返しますが、インタラクティブなデモは、これらのジャンプタームがどのように機能するかを理解するのに役立つはずです。

ジャンプタームと一緒に整数を選択してみてください（またはジャンプタームなしで試してみてください）。さまざまなキーワードがさまざまな整数値でどのように異なるかを確認してください。 明らかに負の整数は許可されていますが、0と負の値の間に違いは見られません。

Animation-iteration-countプロパティ

アニメーションを1回実行すれば満足できる場合もありますが、アニメーションを複数回実行したい場合もあります。 animation-iteration-countプロパティを使用すると、アニメーションを実行する回数を表す正の数を受け入れることで、これを行うことができます。

 .box animation-iteration-count: 3;

animation-iteration-countの初期値は1ですが、キーワードinfinite （自明）を使用したり、小数値を使用したりすることもできます。 端数の値は、端数の実行の途中でアニメーションを実行します。

 .box animation-iteration-count: 3.5;

上記のコードは、アニメーションを3回半実行します。 つまり、3回の完全な反復と、それに続く1回の最後の反復で、途中で停止します。

このプロパティは、 animation-directionプロパティ（次に説明）と組み合わせて使用​​すると最も便利です。最初から実行するアニメーションは、複数回実行する場合はあまり役に立ちません。

以下のデモを試すと、反復回数の小数値を選択できるため、効果を確認できます。

アニメーション方向プロパティ

このCSSアニメーションチュートリアルで前述したように、 animation-directionプロパティはanimation-iteration-countと組み合わせてうまく機能します。 animation-directionプロパティを使用すると、アニメーションを再生する方向を定義できます。 構文は次のようになります。

 .box animation-direction: alternate;

次の4つのキーワードのいずれかとして値を設定できます。

• normal –アニメーションは最初の反復で順方向に再生されます（デフォルト）
• reverse –アニメーションは最初の反復で逆方向に再生されます
• alternate –アニメーションは最初の反復で順方向に再生され、その後の反復で交互に再生されます
• alternate-reverse - alternateと同じですが、最初の反復で逆方向に再生されます

以下のインタラクティブなデモを使用して、さまざまな反復回数でさまざまな値を試すことができます。

Animation-play-stateプロパティ

animation-play-stateプロパティは、静的なCSS環境ではあまり役立ちませんが、JavaScriptまたはCSSを介してインタラクティブなアニメーションを作成する場合に役立つ場合があります。

このプロパティは、 runningまたはpausedの2つの値を受け入れます。

 .box animation-direction: paused;

デフォルトでは、特定のアニメーションは「実行中」の状態です。 ただし、JavaScriptを使用してプロパティの値を切り替えることができます。 :hoverや:focusなどのインタラクティブなCSS機能を使用して、アニメーションを「一時停止」状態に変更することもできます。これにより、現在の反復のどこにいても、アニメーションが基本的にフリーズします。

以下のインタラクティブなデモには、アニメーションを「一時停止」および「再開」するための2つのボタンで無限に実行されるアニメーションがあります。

アニメーション遅延プロパティ

一部のアニメーションはすぐにアニメーションを開始するように設計されていますが、他のアニメーションは最初の反復の前にわずかな遅延の恩恵を受ける可能性があります。 animation-delayプロパティを使用すると、これを実現できます。

 .box animation-delay: 4s;

他の時間ベースの値と同様に、 animation-delayを秒またはミリ秒を使用する値に設定できます。 小数値を使用することもできます。

遅延は最初の反復でのみ発生し、各反復では発生しないことに注意することが重要です。 以下のインタラクティブデモを使用して、これを試すことができます。

デモでは、反復値と遅延を変更するオプションが提供されているため、遅延が後続の反復に影響を与えず、最初の反復にのみ影響することがわかります。

このプロパティを使用する興味深い方法は、負の値を使用することです。 たとえば、上記のデモを使用して、 animation-delayを-0.5sに設定してみてください。 負の遅延は、タイムマシンで前進するのとほぼ同じように機能します。アニメーションは、最初ではなく途中で始まります。

Animation-fill-modeプロパティ

このCSSアニメーションチュートリアルで取り上げる最後のロングハンドプロパティは、前のデモで使用したものです。 アニメーションが最後の反復を停止すると、ボックスは元の場所にとどまります。 これは、 animation-fill-modeを使用して実行されます。

 .box animation-fill-mode: forwards;

このプロパティは、アニメーションが実行の前後にターゲット要素にスタイルを適用する方法を設定します。 これは概念的に理解するのが少し難しいので、それぞれの値の意味について説明します。 次に、インタラクティブデモを使用して値を比較できます。

このプロパティは、次の4つのキーワード値を受け入れます。

• none –デフォルト、実行前または実行後にスタイルは適用されません
• forwards –アニメーションの最後のキーフレームに適用されたすべてのスタイルを保持します
• backwards –前の値のほぼ逆で、実行を開始するとすぐに、アニメーションが開始する前に、アニメーションに適用されたスタイルを保持します
• both –順forwardsとbackwardsの両方のスタイルを保持します

このCSSアニメーションチュートリアルの最後のデモでは、状況が少し明確になりますが、実際に何を実行し、どのように達成するかを実際に理解する前に、多くのことを試してみる必要があります。

便宜上、すべてのデモを1つのCodePenコレクションに追加しました。

デモでは、塗りつぶしモード、遅延、方向、反復回数を調整できます。これらはすべて、外観に影響を与える可能性があるためです。 また、最初のキーフレームのアニメーションボックスに別の背景色を追加しました。これも、塗りつぶしモードの値をもう少し明確にするのに役立ちます。 それでもanimation-fill-modeがどのように機能するかがよくわからない場合は、animation animation-fill-modeについて詳しく説明している私が書いた古い記事を確認してください。

アニメーションの省略形のプロパティ

初心者向けのこのCSSアニメーションチュートリアルでは、8つの異なるプロパティについて説明しました。長い手を使用することをお勧めします。 これにより、明示的な値が設定されていることがわかりやすくなります。

各プロパティを十分に理解したら、 animationの短縮プロパティを使用するオプションがあります。これにより、1つの宣言ですべてのロングハンドプロパティを定義できます。

 .box animation: moveObject 2s ease-in-out 3 reverse running 1.3s forwards;

正直なところ、これは1行にたくさんの情報があります。 宣言にすべてのプロパティが含まれていない場合は、省略形を使用することをお勧めしますが、おそらく3つまたは4つだけです。

省略形を使用する場合は、値を任意の順序で配置できますが、次の規則に注意してください。

• 時間を定義する最初の値は、 animation-durationです。 それ以降の時間値はanimation-delayです。
• キーワードとanimation-nameの間に競合がある場合、最初に表示されたキーワード値が優先されます。
• 省略された値は、CSSの省略形プロパティと同様に、初期状態にフォールバックします。

1つの要素に複数のアニメーションを適用する

知っておくとよい最後の機能の1つは、アニメーションをコンマで区切ることにより、1つのオブジェクトに複数のアニメーションを適用するオプションがあることです。

省略形を使用した例を次に示します。

 .box animation: moveObject 2s ease-in-out, fadeBox 3s linear;

ここでは、2つの異なるキーフレームのセットにマップされるが、同じオブジェクトに適用される2つの異なるアニメーションを定義しました。 その同じコードは、次のように手書きで書くことができます。

 .box animation-name: moveObject, fadeBox; animation-duation: 2s, 3s; animation-timing-function: ease-in-out, linear;

各プロパティに、コンマで区切られた2つの値が含まれていることに注目してください。 この場合、速記はほぼ間違いなく読みやすく、保守しやすいでしょう。

このCSSアニメーションチュートリアルのまとめ

最後の警告：アニメーションを適度に使用し、一部のWebユーザーは、点滅する色やその他の動きの速いオブジェクトによって悪影響を受ける可能性があることに注意してください。