VIDEO LESSON

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

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

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

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

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、トランジション・タイミング・ファンクションです。
0:07前回は、変化が始まるまでの待ち時間、ディレイを取り上げました。
0:12今回は、変化が始まってから終わるまでの「速さの変わり方」を決めるプロパティです。
0:17たとえば、同じ四百ミリ秒でボタンが少し上へ動くとしても、最初から最後まで同じ速さなのか、
0:23ゆっくり動き出して、ゆっくり止まるのかで、見た目の印象は大きく変わります。
0:29その違いを作る指定を、順番に見ていきましょう。
0:32位置づけを確認します。
0:34トランジションには、対象を決めるプロパティ、変化にかける時間を決めるデュレーション、
0:40進み方を決めるタイミング・ファンクション、始まるまでの待ち時間を決めるディレイの四つがありました。
0:46一括指定では、時間を二つ書くと一つ目がデュレーション、二つ目がディレイにあたり、
0:51イーズ・イン・アウトのような値がタイミング・ファンクションにあたります。
0:56画面の例では、背景色と位置の変化に、四百ミリ秒、イーズ・イン・アウトが指定されています。
1:02進み方だけを差し替えたいときは、今回の個別プロパティで指定するのが確実です。
1:07書き方を見てみましょう。
1:09セレクターで要素を選び、トランジション・タイミング・ファンクションに、進み方を表す値を指定するだけです。
1:18仕様上の初期値はイーズで、つまり何も書かなければ、イーズの進み方が自動で使われています。
1:25これまで意識せずに滑らかな変化を見ていた場合も、実はこのイーズが効いていた、
1:29ということです。
1:32また、このプロパティは継承しません。
1:35親に書いても子には効かないので、変化させたい要素自身に指定してください。
1:41この後の例では、まずリニアを指定するところから始めます。
1:46代表的な値を見ていきます。
1:48リニアは、最初から最後まで一定の速さで進みます。
1:52等速なので、機械的ではっきりした動きになります。
1:56イーズ・インは、ゆっくり始まってだんだん速くなる進み方。
2:01イーズ・アウトはその逆で、速く始まってゆっくり止まります。
2:06イーズ・イン・アウトは、始まりと終わりの両方が緩やかで、真ん中が速い進み方です。
2:13そして初期値のイーズは、緩やかに始まって、終わりに向けて緩やかになる、標準的な進み方です。
2:20まずはこのキーワードから使い分けるのが、初心者にはおすすめです。
2:26応用的な値も紹介します。
2:27キュービック・ベジェは、加減速の曲線、専門的にはイージング曲線と呼ばれるものを、
2:32四つの数値で細かく指定する方法です。
2:36数値によっては、行き過ぎてから戻ってくるような、弾む動きも作れます。
2:42もう一つのステップスは、変化をなめらかにつなげず、指定した段数で、カクカクと段階的に進める指定です。
2:50コマ送りのような表現に使われます。
2:52どちらも表現の幅は広がりますが、最初はキーワードの違いを確かめることを優先し、
2:57必要になってから手を出すくらいで十分です。
3:02記事の活用例を見てみましょう。
3:04薄い緑色のボタンが用意され、背景色と位置の変化に、四百ミリ秒のトランジションが指定されています。
3:11ホバー、またはキーボードのフォーカスが当たると、背景がオレンジ寄りの色になり、
3:14ボタンが少し上へ移動します。
3:18注目は最後の行、トランジション・タイミング・ファンクション、リニアです。
3:23上の行ではイーズで指定されていた進み方が、この行で上書きされ、両方の変化が一定の速さで進むようになります。
3:31どの行が進み方を決めているのかを意識しながら読むと、コードの構造がつかめます。
3:36違いを確かめるには、最後の行の値だけをイーズ・イン・アウトに置き換えます。
3:42ポイントは、デュレーションを四百ミリ秒のまま、そろえることです。
3:48合計の時間も、移動する距離も同じ。
3:50違うのは、その中での速さの配分だけです。
3:54リニアでは最初から最後まで同じペースで進むのに対して、イーズ・イン・アウトでは、
4:00動き出しと終わり際が緩やかになり、全体にやわらかい印象になります。
4:06記事の比較も、この値一つだけを変える方法で行われています。
4:11複数の指定を一度に変えないことが、違いを正しく確かめるコツです。
4:16間違えやすい点を確認します。
4:18デュレーションを変えると、変化にかかる合計の時間そのものが長くなったり短くなったりします。
4:25一方、タイミング・ファンクションを変えても、合計の時間は変わりません。
4:30変わるのは、その時間の中で、どの区間を速く進み、どの区間をゆっくり進むかという配分です。
4:37列車に例えると、所要時間がデュレーションで、駅の間での加速や減速のしかたがタイミング・ファンクション、
4:43とイメージすると区別しやすいでしょう。
4:48比較実験では、デュレーションを固定して進み方だけを変えるのが鉄則です。
4:53使いどころを考えましょう。
4:56ボタンやメニューのような短い変化では、両端が緩やかな進み方にすると、操作に自然に追随している印象になります。
5:04逆に、リニアの等速は、進捗バーのような、一定であること自体に意味がある場面に向いています。
5:12なお、対象ごとに進み方を変えたい場合は、値をカンマで区切って、対象の並び順に対応させることもできます。
5:20あわせて、端末の「動きを減らす」設定が有効な人には、メディアクエリでトランジション自体を止める配慮も、
5:25記事の例に含まれています。
5:31効かないときの確認です。
5:32進み方は、変化そのものがあって初めて意味を持ちます。
5:36まず、トランジションの対象とデュレーションが指定され、ホバーなどで実際に値が変わっているかを確認してください。
5:44特に、デュレーションがゼロのままだと、変化は一瞬で終わり、進み方の違いは見えません。
5:51また、値の綴りを間違えた宣言は、無効として丸ごと無視されます。
5:55開発者ツールでは、スタイルズで宣言が打ち消されていないか、コンピューテッドで最終的な進み方を確認する順番が有効です。
6:04スタイルシート自体の読み込み確認も忘れずに。
6:07ブラウザー互換性は良好です。
6:09プロパティ自体は、クローム、エッジ、ファイアフォックス、サファリのいずれも、
6:13かなり前のバージョンから接頭辞なしで使えます。
6:16リニアやイーズ・イン・アウトといった値に限れば、さらに古いバージョンから対応しています。
6:22まとめると、タイミング・ファンクションは、合計の時間の中で、速さの変わり方を決める指定です。
6:28初期値はイーズ、継承はしません。
6:30練習として、リニアとイーズ・イン・アウトの違いを、自分の言葉で説明してみてください。
6:35次回は、変化にかける時間そのものを決める、トランジション・デュレーションを取り上げます。
6:41お疲れさまでした。

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

この動画で学べること

transition-timing-functionの役割と主な指定値を解説。一定の速さと、始まりと終わりが緩やかな動きを比較します。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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