VIDEO LESSON

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

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

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

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

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、アニメーション・タイミング・ファンクションです。
0:07このプロパティが決めるのは、アニメーションの「進み方」、つまり速さの変化のしかたです。
0:12たとえば箱が右へ移動する動きで、再生時間も移動する距離もまったく同じでも、
0:16最初から最後まで同じ速さで進むのか、ゆっくり動き出して最後はそっと止まるのかで、
0:20見た目の印象は大きく変わります。
0:24時間の長さはデュレーション、始まるまでの待ち時間はディレイの担当です。
0:29このタイミング・ファンクションは、その間の「加速と減速のカーブ」を担当するツマミだと考えてください。
0:35進み方をグラフで考えてみましょう。
0:38横軸が時間、縦軸がどれだけ進んだかを表すとします。
0:42等速の動きは、ななめ一直線のグラフになります。
0:46時間がたつほど、一定の割合で進んでいくからです。
0:50一方、ゆっくり始まってゆっくり終わる動きは、最初はゆるやか、真ん中で急になり、
0:56最後はまたゆるやかになる、エスの形に近いカーブを描きます。
1:02スタートとゴールはどちらも同じなのに、途中の速さの配分が違う。
1:07それが進み方の違いです。
1:09このカーブの形を、言葉や数値で指定するのが、今回のプロパティの役割です。
1:15イメージとしては、電車の発車と停車に似ています。
1:19急に飛び出して急に止まるのではなく、駅を出るときと入るときはゆっくり、というあの感覚を、
1:24画面の中の動きで再現するわけです。
1:29書き方を確認します。
1:31対象の要素を選ぶセレクター、中括弧、プロパティ名、コロン、値、セミコロンの順です。
1:37画面の例では、デモというクラスを持つ要素に、進み方としてリニアを指定しています。
1:43ここではまず形を押さえてください。
1:45値には、このあと紹介するキーワードや関数を書きます。
1:49コロンやセミコロンを落とすと、その宣言だけが無効になってしまうので注意しましょう。
1:55なお、このプロパティは単独では何も動かしません。
1:59アニメーションの名前や再生時間と組み合わせて、初めて意味を持ちます。
2:04主なキーワードを並べます。
2:06イーズは初期値で、ゆっくり始まり、速くなって、ゆっくり終わる、標準的で無難な進み方です。
2:13リニアは、最初から最後まで同じ速さを保つ等速です。
2:17イーズインはゆっくり始まってだんだん速くなり、イーズアウトは逆に、速く始まってゆっくり終わります。
2:24イーズインアウトは、開始と終了の両方をゆるやかにしたもので、イーズよりも緩急がはっきりしています。
2:32迷ったら、まずイーズとリニアとイーズインアウトの三つを切り替えて、動きの違いを見比べるのがおすすめです。
2:40なお、何も指定しなければ初期値のイーズが効いています。
2:45だからこそ、違いを体感するには、あえてリニアに変えて等速の動きと見比べるのが近道です。
2:52キーワードで足りなければ、キュービックベジエという関数でカーブを自作できます。
2:58括弧の中に四つの数値を書き、曲線の曲がり具合を決める、二つのつまみの位置を指定します。
3:05たとえば、ゼロ点四二、ゼロ、ゼロ点五八、一、という組み合わせは、イーズインアウトとほぼ同じカーブになります。
3:13最初は難しく感じるかもしれませんが、開発者ツールにはカーブをグラフで編集できる仕組みがあり、
3:18動かしながら動きを試せます。
3:23キーワードは、この数値の代表例に名前を付けたものだ、と理解すると整理しやすいです。
3:29もう一つの関数がステップスです。
3:31これは滑らかに進むのではなく、動きを指定した段数で区切って、カクカクと段階的に進ませます。
3:37たとえばステップス、カッコ四と書けば、全体の動きが四段階に分かれます。
3:42カウントダウンの表示や、ドット絵のキャラクターがコマ送りのように動く表現などで使われる指定です。
3:48似たキーワードに、最初の一段をすぐ進めるステップ・スタートと、最後まで待ってから一段進めるステップ・エンドもあります。
3:56滑らかさとは逆の、機械的なリズムを作る道具と覚えてください。
4:00実例で比べてみましょう。
4:02土台として、箱が右へ一レムだけ移動する、スライドインというキーフレームを用意します。
4:10下の指定では、この動きを一秒かけて、〇・三秒の遅延のあと、一回だけ再生しています。
4:18そして最後の行で、進み方をリニアに上書きしています。
4:23このとき、再生時間は一秒、移動量は一レムで、ほかの設定は変わりません。
4:29変えているのは進み方だけです。
4:32画面で比べると、リニアの方は、最初の一歩からゴールまで、ずっと同じペースで進み続けます。
4:40記事のサンプルは再読み込みで最初から再生できますので、この等速な進み方を、
4:45まず目で追って感覚をつかんでください。
4:51では最後の行の値だけを、イーズインアウトに変えてみます。
4:56再生時間も移動量も同じですが、動き出しはそっと、そして最後はゆるやかに減速して止まるように見えます。
5:05同じ一秒でも、こちらの方が丁寧で柔らかい印象になります。
5:10ここで大事な注意が一つ。
5:12進み方を書いたあとに、アニメーションの一括指定を書き足すと、一括指定に含まれる初期値で、
5:17進み方まで上書きされてしまいます。
5:23個別の指定は、一括指定より後ろに書くのが安全です。
5:27間違えやすい点を一つ。
5:29タイミング・ファンクションは、アニメーション全体に一本のカーブを引く指定だと思われがちですが、
5:34実際はキーフレームの区間ごとに適用されます。
5:39キーフレームが、ゼロパーセント、五〇パーセント、百パーセントのように複数ある場合、
5:44その間ごとに進み方が効きます。
5:48つまり区間の数が多いと、その分だけ加速と減速が繰り返され、区間の境目で急に速さが変わって見えることがあります。
5:56思ったよりギクシャクすると感じたら、区間ごとの効き方を疑ってみてください。
6:02効かないときの確認です。
6:03まず前提として、進み方は単独では動きません。
6:07アニメーションの名前と再生時間がなければ、比較する動き自体が存在しません。
6:12次に、先ほど触れた一括指定との順番を確認します。
6:16後から書かれた一括指定が、進み方を初期値のイーズへ戻しているかもしれません。
6:21開発者ツールでは、スタイルズで宣言に取り消し線が付いていないか、コンピューテッドで最終的な値がどうなっているかを見ます。
6:30また、端末やブラウザーの「動きを減らす」設定が有効だと、アニメーション自体が止められ、
6:35指定が効いていないように見える場合もあります。
6:40最後に基本情報をまとめます。
6:42初期値はイーズで、書かなければこの進み方で動きます。
6:46継承はしません。
6:47ほかのアニメーション関連のプロパティと同じく、動きを持たせたい要素ごとに指定します。
6:53ブラウザーの対応は広く、クローム、エッジ、ファイアフォックス、サファリのいずれでも、
6:56長く使えてきたプロパティです。
7:00練習として、同じ動きにリニアとイーズインアウトを設定し、どちらが内容に合うかを言葉で説明してみてください。
7:08時間と距離が同じでも、進み方で印象が変わる。
7:11その感覚をつかめれば、このプロパティは使いこなせます。
7:15次回は、繰り返し回数を決める、アニメーション・イテレーション・カウントを取り上げます。

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

この動画で学べること

animation-timing-functionの役割と主な指定値を解説。同じ時間と移動量で速度の変化を比較します。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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