VIDEO LESSON

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

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

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

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

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、アニメーションを一括で指定するプロパティ、アニメーションです。
0:09アニメーションを使うと、要素の位置や透明度などを、時間に沿って自動で変化させることができます。
0:15その変化の内容は、キーフレームという仕組みで別に定義し、アニメーションでは、
0:21どの動きを、どれくらいの時間で、何回再生するかといった、再生のしかたをまとめて決めます。
0:27この動画では、一括指定の読み解き方から、値の内訳、間違えやすい落とし穴、
0:32効かないときの確認方法まで、順番に学んでいきましょう。
0:36まず、動きそのものの作り方です。
0:39アットキーフレームズというルールを書いて、名前を付けます。
0:43画面の例では、スライドインという名前で、横方向の位置がゼロから百二十ピクセルへ移る動きを定義しています。
0:51フロムが開始時点、トゥーが終了時点の状態です。
0:55もう一つのフェードインは、不透明度をゼロから一へ変える動きです。
1:00キーフレームの中では、パーセントを使って途中の状態を細かく指定することもできます。
1:06大切なのは、アニメーションはこのキーフレームを参照して初めて動く、という関係です。
1:13名前の対応が取れていないと、何も再生されません。
1:16では、アニメーションプロパティの基本形を見てみましょう。
1:21画面のコードは、スライドインというキーフレームを、一秒かけて、イーズアウトという速度の変化で再生する指定です。
1:30〇・三秒は開始までの遅延、二は再生回数、最後のボースは、開始前と終了後の見た目の扱いを決めるフィルモードです。
1:40このように、アニメーションは八つ前後の関連プロパティを一行にまとめた、一括指定プロパティです。
1:48値がたくさん並ぶので、最初は意味の塊ごとに区切って読むのがコツです。
1:54次のセクションから、並び方と内訳を一つずつ確認していきます。
1:59並び方で最も間違えやすいのが、二つの時間の扱いです。
2:04アニメーションでは、最初に書いた時間が再生時間、つまりデュレーションで、
2:10二番目に書いた時間が、開始までの遅延、ディレイとして読まれます。
2:16画面の例なら、〇・六秒が再生時間、〇・二秒が遅延です。
2:21それ以外の値の順番は比較的自由ですが、時間だけは位置で判断されるため、入れ替えて書くと動きがまるで変わってしまいます。
2:32迷ったときは、再生時間、遅延の順と声に出して確認するとよいでしょう。
2:39なお、遅延にはマイナスの値も書けますが、再生時間にマイナスは使えません。
2:45値の内訳を、個別プロパティの名前と対応づけて見ていきます。
2:50一つ目はアニメーションネームで、使うキーフレームの名前です。
2:55カンマで区切れば、複数の動きを同時に再生することもできます。
2:59二つ目はアニメーションデュレーションで、一回の再生にかかる時間です。
3:05単位は秒を表すエスか、ミリ秒を表すエムエスで、〇・六秒は六百エムエスと同じ長さです。
3:11ここで重要な注意があります。
3:14デュレーションの初期値はゼロ秒で、ゼロのままだとアニメーションは一瞬で終わり、
3:18見た目には何も起きません。
3:22動かないときの第一の容疑者は、この時間の指定漏れです。
3:26三つ目はアニメーション・タイミング・ファンクション、速度の変化のしかたです。
3:32イーズはゆっくり始まってゆっくり終わる、イーズアウトは速く始まってゆっくり止まる、
3:37リニアは一定の速さ、といったキーワードから選べます。
3:42四つ目はアニメーションディレイ、再生が始まるまでの待ち時間です。
3:47プラスの値では、その時間だけ開始が遅れます。
3:51マイナスの値を書くと、すでに途中まで再生が進んだ状態から始まる、という少し変わった使い方もできます。
3:59遅延の間、要素がどう見えるかは、次に説明するフィルモードと関係します。
4:04五つ目はアニメーション・イテレーション・カウント、再生回数です。
4:08数字を書けばその回数だけ繰り返し、インフィニットと書けば無限に繰り返します。
4:14六つ目はアニメーションディレクションで、繰り返しの向きを決めます。
4:18オルタネートは往復、リバースは逆再生です。
4:21七つ目はアニメーション・プレイ・ステートで、ランニングが再生中、ポーズドが一時停止を表します。
4:27ボタンを押したときだけ止める、といった制御に使います。
4:31八つすべてを一括指定に書く必要はなく、必要なものだけを書けば、残りは初期値が使われます。
4:37八つ目はアニメーション・フィル・モード、開始前と終了後の見た目を保つかどうかです。
4:43ノーンが初期値で、遅延中や終了後は、普段のスタイルに戻ります。
4:48バックワーズは、遅延の間、最初のキーフレームの状態を先取りして表示します。
4:53フォワーズは、終了後も最後のキーフレームの状態を保ち続けます。
4:58ボースは、その両方です。
5:00たとえば、透明な状態からふわりと現れる演出では、遅延中に要素が見えてしまわないよう、
5:04ボースやバックワーズが欠かせません。
5:09終了後の状態を保ちたいかどうかで、フォワーズ系かどうかを選ぶのが目安です。
5:15一括指定には、便利な反面、落とし穴があります。
5:18アニメーションを書くと、省略した関連プロパティまですべて初期値にリセットされます。
5:25画面の例では、先に再生時間を二秒と書いても、後から名前だけの一括指定を書くと、
5:29再生時間は初期値のゼロ秒に戻ってしまいます。
5:34対策は三つあります。
5:36一括指定を先に書き、細かい調整は個別プロパティをその後に書くこと。
5:41調整も含めて一括指定に全部書き切ること。
5:44そして、クラスを分けて詳細度の競合を避けることです。
5:48効いていない設定があるときは、この初期化が起きていないか疑ってみましょう。
5:54アニメーションが効かないときは、順番に確認しましょう。
5:58まず、キーフレームの名前の綴りが、アニメーションネームと完全に一致しているかを見ます。
6:05タイプミスが一番多い原因です。
6:07次に、再生時間がゼロ秒になっていないかを確認します。
6:11セレクターが対象要素に合っているか、スタイルシート自体が読み込まれているかも基本です。
6:18また、端末やブラウザーで動きを減らす設定が有効だと、サイト側の指定でアニメーションが止められている場合もあります。
6:27開発者ツールのスタイルズで宣言が打ち消されていないか、コンピューテッドで最終値を見るのが確実な切り分け方です。
6:35最後に、互換性とまとめです。
6:38アニメーションは、クローム、ファイアフォックス、サファリなど主要ブラウザーで長く対応しており、
6:43現在の安定版では接頭辞なしで使えます。
6:48アニメーション自体は子要素へ継承されません。
6:51練習としては、記事の二つの指定、スライドイン一秒イーズアウトと、フェードイン六百ミリ秒を実際に書き比べ、
6:57次に値を一つだけ変えて結果を言葉で説明してみてください。
7:04関連する個別プロパティの記事も、この後の動画で順に扱います。
7:08アニメーションは、キーフレームで動きを作り、一括指定で再生のしかたを決める。
7:14これが今回の要点です。

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

この動画で学べること

animationの役割と主な指定値を解説。再生する動きと時間・回数などをまとめて変更します。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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