初心者のための完全なシンタックスガイドとインタラクティブなCSSアニメーションのチュートリアルです。
CSSアニメーション仕様のさまざまな部分を学ぶための参考資料としてご利用ください。
過去10年間で、ブラウザの性能は大きく向上しました。
以前は、レンダリングやパフォーマンスの問題が発生する可能性があったため、Webページにインタラクティブなアニメーションを追加することは、より困難なことでした。
しかし現在では、CSS アニメーションはより自由に使用でき、グリッドやフレックスボックスなどの CSS 機能と比較して、一般に構文を習得するのがはるかに容易です。
W3C CSSアニメーション仕様の一部には、さまざまな機能があります。
使い方が簡単なものもあれば、そうでないものもあります。
このCSSキーフレームアニメーションチュートリアルでは、各プロパティを含むすべての構文について説明します。
また、CSSアニメーションで何ができるかを把握するために、インタラクティブなデモも紹介します。
keyframes構文
すべての CSS アニメーションには 2 つの部分があります。
1つ以上の animation-* プロパティと、 @keyframes at-rule を用いて定義されるアニメーションキーフレームのセットです。
ここでは、 @keyframes ルールセットの構築について、詳しく見ていきましょう。
構文は次のようになります。
@keyframes moveObject {
0% {
transform: translateX(0);
}
50% {
transform: translateX(300px);
}
100% {
transform: translateX(300px) scale(1.5);
}
}
ここに示すように、 @keyframes アットルールには3つの基本的な部分があります。
- カスタムアニメーションの名前をつけた
@keyframesルールが続きます。 - すべてのキーフレームを囲む中括弧のセット
- 1 つまたは複数のキーフレーム。それぞれのキーフレームにはパーセンテージが設定され、中括弧で囲まれたルールセットが続きます。
CSS アニメーションのチュートリアルの最初の例では、アニメーションを moveObject という名前で定義しています。
この名前は大文字と小文字を区別し、CSS のカスタム ID の規則に従わなければなりません。
このカスタム名は animation-name プロパティ（後述）で使用されている名前と一致する必要があります。
この例では、アニメーションの各キーフレームをパーセンテージで定義していることに気づきます。
もし、アニメーションに 0% や 100% といったキーフレームがある場合は、 from や to といったキーワードを使用することもできます。
@keyframes moveObject {
from {
transform: translateX(0);
}
50% {
transform: translateX(300px);
}
to {
transform: translateX(300px) scale(1.5);
}
}
次のインタラクティブなCodePenは、上記の構文を実際の例で使用しています。
Pen CSS Animations: the @keyframes At-rule by Louis Lazaris on CodePenをご覧ください。
このデモでは、アニメーションをリセットするボタンを用意しました。
なぜこれが必要なのかは、後で説明します。
このアニメーションには、開始、50%ステップ、終了（つまり、0%、50%、100%）の3つのキーフレームが含まれていることを知っておいてください。
それぞれのキーフレームでは、キーフレーム選択子と呼ばれるものを使い、中括弧を使ってそのステップでのプロパティを定義しています。
keyframes` の構文について、いくつか注意すべき点があります。
- キーフレームのルールセットを好きな順番で並べることができ、ブラウザはそのパーセンテージで決められた順番で実行します。
- 0%と100%のキーフレームを省略することができ、ブラウザはアニメーションされる要素の既存のスタイルによってこれらを自動的に決定します。
- 異なるルールセットでキーフレームが重複している場合（例えば、異なる変換値で20%のキーフレームが2つある場合）、ブラウザは最後の1つを使用します。
- 複数のキーフレームを一つのキーフレーム セレクタで定義するには、カンマを使用します：
10%, 30% { ... } - キーワード
!importantはプロパティの値を無効にするので、キーフレームルールセット内のプロパティに使用するべきではありません。
この CSS アニメーションチュートリアルで @keyframes の構文を理解したところで、アニメーションさせる要素に定義されている様々なアニメーションプロパティを見ていきましょう。
これから取り上げるアニメーション・プロパティは以下の通りです。
- animation-name プロパティ
- animation-duration プロパティ
- The animation-timing-function プロパティ
- The animation-iteration-count property（アニメーション反復回数プロパティ
- The animation-direction プロパティ
- The animation-play-state property（アニメーション再生状態プロパティ
- animation-delay property（アニメーション遅延）プロパティ
- animation-fill-mode プロパティ
- animation shorthand プロパティ
- 1つの要素に複数のアニメーションを適用する
animation-name プロパティ
前述のとおり、作成する CSS アニメーションには @keyframes 構文で表示される名前を付ける必要があります。
この名前は animation-name プロパティで定義された名前と同じでなければなりません。
前のデモの CSS を使用すると、構文は次のようになります。
.box {
animation-name: moveObject;
}
繰り返しになりますが、定義したカスタム名は @keyframes のアットルールの名前としても存在する必要があります。
これは、JavaScriptの関数呼び出しのようなものだと考えることができます。
関数自体はコードの @keyframes moveObject {} の部分になり、関数呼び出しは animation-name: moveObject となります。
animation-name` について覚えておくべきことがいくつかあります。
- animation-name
の初期値はnone` で、これはキーフレームがアクティブでないことを意味します。これは、アニメーションを無効にするための ‘トグル’ のようなものとして使用することができます。 - 選択した名前は大文字と小文字を区別し、アルファベット、数字、アンダースコア、ハイフンを含めることができます。
- 名前の最初の文字は文字かハイフンでなければなりませんが、ハイフンは1つだけです。
- 名前は
unset,initial,inheritのような予約語ではいけません。
animation-duration プロパティ
animation-duration` プロパティは、当然ながら、アニメーションの開始から終了までにかかる時間を定義します。
この値は、以下のように秒またはミリ秒単位で指定することができます。
.box {
animation-duration: 2s;
}
上記は以下と同等となります。
.box {
animation-duration: 2000ms;
}
次のCodePenのデモでは、animation-durationプロパティの動作を見ることができます。
このデモでは、アニメーションの継続時間を選択することができます。
秒単位やミリ秒単位でさまざまな値を入力し、「Animate the Box」ボタンでアニメーションを実行してみてください。
CodePenのPen CSS Animations: the animation-duration Property by Louis Lazarisを参照してください。
単位に ms と共に小さな数値を使用すると、動きに気づかないかもしれません。
ミリ秒を使用している場合は、より大きな数値を設定してみてください。
animation-duration` を使用する際の注意点です。
- 負の値は無効です。
- duration が
0s(初期値) に設定されている場合でも、単位は含まれなければなりません。 - 分数値を使用することができます (例:
0.8s)
animation-timing-function プロパティ
animation-timing-function` は、前の 2 つのプロパティほど意味は明白ではありませんが、CSS アニメーションの進行方法を定義するために使用されます。
これは最も明確な説明ではないかもしれませんが、構文が明確にするのに役立つかもしれません。
宣言は次のようなものです。
.box {
animation-timing-function: linear;
}
このプロパティは、以下のキーワード値を受け付けます。
-
ease(初期値) -
ease（初期値） *ease-in（初期値 -
ease-out(イーズアウト) -
ease-in-out(イーズインアウト) -
linear(線形) - ステップスタート
step-end
ほとんどの値は名前から比較的簡単に把握できますが、以下のインタラクティブなデモを使用することで、どのような違いがあるのかを確認できます。
CodePenのPen CSS Animations: the animation-timing-function Keywords by Louis Lazarisを参照してください。
select入力で、7つのキーワードのうち1つを選びます。
ease-*`の値は、様々な方法でアニメーションを「緩和」することに注意してください。
直線的な値は、終始一貫しています。
animation-timing-function` プロパティは以下の関数も受け付けます。
-
cubic-bezier()– 引数として、カンマで区切られた4つの数値が渡されます。 -
steps()– 引数として、2つの値、数値とカンマで区切られた “ジャンプ用語” を受け付けます。
キーワード値 step-start と step-end は、それぞれ steps(1, jump-start) と steps(1, jump-end) と等価です。
cubic-bezier()` については、以下のインタラクティブなデモを見ると、この関数を少し理解できるかもしれません。
Pen CSS Animations: the cubic-bezier() Function by Louis Lazaris on CodePenをご覧ください。
このデモでは、cubic-bezier()関数の4つの引数を設定することができることに注意してください。
この種のタイミング関数がどのように機能するかについての適切な説明は、この記事やこの対話型ツールをご覧ください。
一方、steps()関数は、2つの引数を受け取ります。
- アニメーションの1サイクルに沿って、同じ「ストップ」を表す整数。
- アニメーションを特定の間隔で「停止」させるかどうかを決定する、「ジャンプターム」と呼ばれるオプションのキーワード。
繰り返しになりますが、インタラクティブなデモを見れば、このジャンプタームがどのように機能するかがわかるはずです。
CodePenのLouis LazarisによるPen CSS Animations: the steps()ファンクションを参照してください。
ジャンプ用語と一緒に整数を選択して（あるいはジャンプ用語なしで）、整数の値によってキーワードがどのように異なるかを試してみてください。
どうやら負の整数も許されるようですが、0とどんな負の値でも違いがあるとは思えません。
animation-iteration-count プロパティ
場合によっては、アニメーションは一度実行されれば満足ですが、時には複数回実行させたいこともあるでしょう。
animation-iteration-count` プロパティには、アニメーションの実行回数を正の数で指定します。
.box {
animation-iteration-count: 3;
}
animation-iteration-countの初期値は1ですが、キーワードinfinite` (自明) を使用したり、小数値を使用したりすることもできます。
分数値は、アニメーションを途中までしか実行しません。
.box {
animation-iteration-count: 3.5;
}
上記のコードは、アニメーションを 3 回と半分の回数だけ実行します。
つまり、3回の完全な繰り返しと、ちょうど途中で停止する最後の繰り返しがあります。
このプロパティは animation-direction プロパティ（次で説明します）と組み合わせて使用すると最も便利です。
以下のデモでは、反復回数に小数値を選択できるので、その効果を試してみてください。
Pen CSS Animations: the animation-iteration-count Property by Louis Lazaris on CodePenを参照してください。
animation-direction プロパティ
この CSS アニメーションのチュートリアルで述べたように、animation-direction プロパティは animation-iteration-count とうまく組み合わせて使うことができます。
animation-direction` プロパティは、アニメーションを再生する方向を指定します。
シンタックスは以下のようになります。
.box {
animation-direction: alternate;
}
値は 4 つのキーワードのうちの 1 つとして設定することができます。
-
normal– アニメーションは、最初のイテレーションで前方に再生されます（デフォルト）。 -
reverse– 最初のイテレーションでアニメーションを逆再生します。 -
alternate– 最初のイテレーションでアニメーションを順方向に再生し、その後のイテレーションで交互に再生します。 -
alternate-reverse–alternateと同じですが、最初の繰り返しで逆方向のアニメーションを表示します。
以下のインタラクティブなデモで、異なる値を異なる反復回数で試してみることができます。
Pen CSS Animations: the animation-direction Property by Louis Lazaris on CodePenをご覧ください。
animation-play-state プロパティ
animation-play-state` プロパティは、静的な CSS 環境ではあまり有用ではありませんが、JavaScript や CSS でインタラクティブなアニメーションを記述する場合には便利でしょう。
このプロパティは 2 つの値を受け取ることができます。
Runningまたはpaused` です。
.box {
animation-direction: paused;
}
デフォルトでは、任意のアニメーションは “running” 状態にあります。
しかし、JavaScript を使ってこのプロパティの値を切り替えることができます。
さらに、:hover や :focus のようなインタラクティブな CSS 機能を使用して、アニメーションを “一時停止” 状態に変更することも可能でしょう。
以下のインタラクティブなデモでは、アニメーションを無限に実行し、2つのボタンでアニメーションを「一時停止」「再開」することができます。
CodePenのPen CSS Animations: the animation-play-state Property（Louis Lazaris著）を参照してください。
アニメーションディレイのプロパティ
あるアニメーションはすぐにアニメーションを開始するように設計されていますが、他のアニメーションは最初の反復の前に少し遅延させることで恩恵を受けることができます。
animation-delay` プロパティを使用すると、このようなことが可能になります。
.box {
animation-delay: 4s;
}
他の時間ベースの値と同様に、animation-delay には秒数かミリ秒の値を設定することができます。
また、小数値を使用することもできます。
注意すべき点は、遅延は最初の反復処理にのみ発生し、各反復処理には発生しないことです。
以下のインタラクティブなデモで試すことができます。
Pen CSS Animations: the animation-delay Property by Louis Lazaris on CodePenをご覧ください。
このデモでは、遅延時間だけでなく反復の値も変更できるため、遅延時間が後続の反復に影響せず、最初の反復にのみ影響することが分かります。
このプロパティの興味深い使い方は、負の値を使用することです。
例えば、上記のデモで animation-delay を -0.5s に設定してみてください。
この負の遅延は、まるでタイムマシンで時間を進めているような効果があることに気がつくでしょう – アニメーションは最初からではなく、途中から始まります。
animation-fill-mode プロパティ
この CSS アニメーションチュートリアルで取り上げる最後の長方形プロパティは、前回のデモで使用したものです。
アニメーションが最後の反復を停止したとき、ボックスがその位置に留まっていることに気づくでしょう。
これは animation-fill-mode を使って実現されています。
.box {
animation-fill-mode: forwards;
}
このプロパティは、アニメーションが実行される前と後に、対象となる要素にどのようにスタイルを適用するかを設定します。
これは概念的に理解するのが少し難しいので、各値の意味を説明します。
その後、インタラクティブなデモを使って値を比較してみてください。
このプロパティは、以下の4つのキーワード値を受け付けます。
-
none– デフォルトで、実行前も実行後もスタイルを適用しません。 -
forwards– アニメーションの最後のキーフレームで適用されたすべてのスタイルを保持します。 - backwards` – 多少、前の値の逆で、アニメーションの実行を開始すると同時に適用されたスタイルを保持しますが、アニメーションが始まる前に適用されたスタイルも保持します。
-
both–forwardsとbackwardsの両方のスタイルを保持します。
この CSS アニメーションチュートリアルの最後のデモでは、物事をもう少し明確にする予定ですが、このデモでは、何をどのように実現するのかを本当に理解するまで、何度も遊んでみる必要があるかもしれません。
CodePenのPen CSS Animations: the animation-fill-mode Property by Louis Lazarisを参照してください。
便利なように、すべてのデモを1つのCodePenコレクションに追加しました。
このデモでは、塗りつぶしモード、遅延、方向、反復回数を調整できることにお気づきでしょう。
これらはすべて、見た目に影響を与えることができるからです。
また、最初のキーフレームでアニメーションのボックスに異なる背景色を追加していますが、これも塗りつぶしモードの値をもう少し分かりやすくするのに役立っています。
もしまだ animation-fill-mode の仕組みがよくわからない場合は、私が書いた animation-fill-mode について詳しく説明した古い記事を参照してください。
アニメーションのショートハンドレッドプロパティ
このCSSアニメーションチュートリアルでは、初心者のために8種類のプロパティを取り上げましたが、ぜひロングハンドを使用してください。
そうすることで、設定されている明示的な値を見やすくすることができます。
それぞれのプロパティをよく理解したら、animationショートハンドプロパティを使うという選択肢もあります。
これは、すべてのロングハンドプロパティを1つの宣言で定義することができます。
.box {
animation: moveObject 2s ease-in-out 3 reverse running 1.3s forwards;
}
正直なところ、これは一行で多くの情報を含んでいます。
すべてのプロパティを記述するのではなく、3つか4つ程度のプロパティを記述するのであれば、省略記法を使用することをお勧めします。
省略記法を使う場合は、値を好きな順番で並べることができますが、次のルールに注意してください。
- 時間を定義する最初の値は
animation-durationで、それ以降の値はanimation-delayとなります。 - キーワードと
animation-nameの間に矛盾がある場合、キーワードの値が最初に表示されれば、それが優先されます。 - キーワードと
animation-nameの間に矛盾がある場合、キーワードの値が先に現れるとそれが優先されます。
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 アニメーションチュートリアルのまとめ
最後の警告です。
アニメーションの使用は控えめに。
また、色の点滅や動きの速いオブジェクトに悪影響を受けるウェブユーザーがいることを忘れないでください。
練習すれば、CSSアニメーションの構文とコンセプトが身に付き、さまざまなデモのコードをいじくり回すことで確実に利益を得られるでしょう。
