VIDEO LESSON

CSSのanimation-nameの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

再生時間 7:15動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、アニメーション・ネームです。
0:06このプロパティが決めるのは、「どのキーフレームを再生するか」、つまり動きの種類そのものです。
0:13前回のアニメーション・デュレーションが「何秒かけて動くか」という時間の指定だったのに対して、
0:18今回は「何の動きを動かすか」を名前で指名します。
0:23キーフレームとは、始まりから終わりまでの変化をまとめた、動きの設計図のようなものです。
0:29その設計図に付けた名前をここで呼び出すことで、要素に狙った動きを付けることができます。
0:35まず、キーフレームとの関係を整理しましょう。
0:38動きの実体は、アット・キーフレームズという書き方で別に定義します。
0:43たとえば、右へ移動する動きにはスライドイン、だんだん見えるようになる動きにはフェードインといった具合に、
0:48定義の先頭に名前を付けます。
0:52アニメーション・ネームの役割は、その名前を指定して、定義済みの動きを要素へ結びつけることです。
0:59名前の指定だけがあって定義がなければ何も起こりませんし、定義だけがあって名前で呼び出されなければ、
1:03その動きは使われません。
1:08二つがそろって初めてアニメーションが再生される、という関係を覚えておきましょう。
1:13書き方を確認します。
1:15対象の要素を選ぶセレクター、中括弧、プロパティ名、コロン、値、セミコロンの順に書きます。
1:22画面の例では、デモというクラスを持つ要素に、スライドインという名前のキーフレームを指定しています。
1:29値は、数字や色ではなく、自分がキーフレームに付けた名前、そのものです。
1:35クラス名と同じように名前は自由に決められますが、意味の伝わる名前を付けるのがおすすめです。
1:42たとえば、開く動きならオープン、点滅ならブリンクのように、後から読んだときに動きを想像できる名前だと、
1:47修正するときに迷いません。
1:52コロンやセミコロンを落とすと、宣言そのものが効かなくなる点もこれまで通りです。
1:58指定できる値を確認します。
2:00基本は、キーフレームで定義した名前です。
2:03もう一つ書けるのがノーンで、「アニメーションを付けない」という意味の値です。
2:09実はこれが初期値でもあります。
2:11つまり初期状態では、どの要素にもアニメーションは付いていません。
2:16ノーンは、付けた動きを打ち消したい場面で役立ちます。
2:20たとえば共通の指定で動きを付けたあと、特定の要素だけ個別にノーンと書けば、
2:24その要素だけを静止させられます。
2:28もう一つ大事な約束として、名前の大文字と小文字は区別されます。
2:32綴りが定義側と指定側で少しでも違うと、別の名前だと見なされて動きません。
2:38ここが、このプロパティでいちばん間違えやすい点です。
2:41名前を指定しただけでは、画面の動きが見えないことがあります。
2:45理由は、再生時間を決めるデュレーションの初期値がゼロ秒だからです。
2:50ゼロ秒の再生は一瞬で終わってしまい、目では確認できません。
2:54アニメーションを再生するには、最低でも名前と再生時間の二つが必要です。
2:58そのうえで、必要に応じて、始まるまでの待ち時間、繰り返しの回数、進み方などを足していきます。
3:05名前はあくまで「どの動きか」の指定であって、動きの条件はほかのプロパティが分担している、
3:08と考えましょう。
3:11土台となる考え方なので、しっかり押さえてください。
3:15一つの要素に、複数のアニメーションを同時に付けることもできます。
3:19その場合は、名前をカンマで区切って並べます。
3:22画面の例では、右へ移動するスライドインと、透明度が変わるフェードインを同時に指定しています。
3:29このとき、ほかのアニメーション関連の値もカンマで並べると、名前の順番に対応して組み合わされます。
3:36例では、移動には二秒、透明度の変化には一秒を指定したことになります。
3:40もし時間の値が名前の数より少ない場合は、先頭の値から繰り返して補われます。
3:46逆に値が余っても、余分は使われません。
3:48複数を扱うときは、「カンマの順番でペアになる」という並びの決まりを意識してください。
3:54実例で流れを確認しましょう。
3:56舞台となる箱の中に、デモという箱を用意します。
4:00動きの定義は二種類あります。
4:02スライドインは、横方向の位置をゼロから一レムまで動かします。
4:07フェードインは、不透明度を〇・四から一まで、つまり半透明から完全に見える状態へ変えます。
4:13下のほうでは、一括指定でスライドインを一秒かけて再生する土台を作り、最後の行で、
4:19今回の主役であるアニメーション・ネームを改めて指定しています。
4:24ページを再読み込みすると、箱が右へ少し移動する動きが確認できます。
4:29名前と定義が正しく結びついている証拠です。
4:32では、最後の行の名前だけをフェードインに置き換えてみます。
4:37変えるのは名前ひとつだけで、再生時間や待ち時間といった条件は共通のままです。
4:43今度は箱の位置は動かず、透明度だけが変化します。
4:46半透明の状態から、だんだん濃く表示される動きになるはずです。
4:51ファイルを保存して、ブラウザーを再読み込みし、二つの動きを見比べてください。
4:57この実験から分かるのは、名前を差し替えるだけで、同じ要素にまったく違う動きを付け替えられるということです。
5:05動きの「種類の切り替えスイッチ」がアニメーション・ネームなのだ、というイメージが持てれば十分です。
5:12一括指定のアニメーションとの関係も押さえておきましょう。
5:16一括指定の中には、キーフレームの名前も含まれています。
5:21一括指定には、関係する値をまとめて初期化する働きがあるため、名前を個別に変えたつもりでも、
5:28それより後ろに一括指定が書かれていると、名前は一括指定の中のものに上書きされてしまいます。
5:35名前だけを後から調整したいときは、個別の指定を一括指定より後ろに書きましょう。
5:41名前の付け方にも注意があります。
5:43ノーンのような、役割の決まった言葉は名前に使えません。
5:47また、単語はハイフンでつなぐ書き方が一般的で、大文字と小文字は後で区別される点も意識しておきましょう。
5:55効かないときは、順番に確認します。
5:58第一に、その名前のキーフレームが本当に定義されているか。
6:02定義がどこにもなければ、指定は空振りになります。
6:05第二に綴りの一致です。
6:07定義側と指定側で、ハイフンの有無や大文字小文字までそろっているか見直してください。
6:13第三に、デュレーションがゼロ秒のままになっていないか。
6:17名前が正しくても、時間ゼロでは動きは見えません。
6:21第四に、後ろの一括指定で名前が上書きされていないか。
6:24開発者ツールでは、スタイルズで宣言が無効扱いになっていないかを確認し、コンピューテッドで最終的に決まった名前を見ます。
6:33また、利用者の「動きを減らす」設定に合わせて装飾の動きを止める作りのページでは、
6:38静止するのが正しい動作の場合もあります。
6:42最後に基本情報をまとめます。
6:44初期値はノーン、つまりアニメーションなしで、継承はしません。
6:48ブラウザーの対応も広く、クロームは四三以降、エッジは一二以降、ファイアフォックスは一六以降、
6:52サファリは九以降で使えます。
6:57練習として、スライドインとフェードインの名前を切り替えて、動きの違いを言葉で説明してみてください。
7:04アニメーション・ネームは、動きの設計図を名前で呼び出す、すべてのアニメーションの出発点です。
7:10次回は、操作に反応して滑らかに変わる、トランジションを取り上げます。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

animation-nameの役割と主な指定値を解説。位置を動かすアニメーションと不透明度を変えるアニメーションを比較します。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのanimation-nameの使い方：指定値・実例・効かない原因とブラウザー互換性 →