transition-timing-functionプロパティの説明
CSSのtransition-timing-functionプロパティは、トランジションが開始してから終了するまでの変化の遷移を指定します。これは、変化前の状態から変化後の状態へと移行する過程に、加速曲線を加えるものです。
トランジションの再生時間は、transition-durationで定義しますが、transition-timing-functionは時間経過の中で速度の変化を表します。
各プロパティごとに変化の推移を個別に指定することも可能です。その場合、transition-propertyでカンマ区切りのリスト形式の指定を行い、各プロパティに対してtransition-timing-functionの値を割り当てます。
これらの指定は、ショートハンド・プロパティのtransitionで一括操作が可能です。
transition-timing-functionに指定できる値
<easing-function>- トランジション効果の変化の推移を表すキーワードや関数による値です。
ease- トランジションの開始から加速し、中間地点で減速に転じます。関数表記の
cubic-bezier(0.25, 0.1, 0.25, 1.0)と同等です。これが初期値です。 linear- トランジションは均等の速度で進みます。関数表記の
cubic-bezier(0.0, 0.0, 1.0, 1.0)と同等です。 ease-in- トランジションは開始時に遅く進み、終了まで加速を続けます。関数表記の
cubic-bezier(0.42, 0, 1.0, 1.0)と同等です。 ease-out- トランジションは加速した状態から始まり、終了まで減速し続けます。関数表記の
cubic-bezier(0, 0, 0.58, 1.0)と同等です。 ease-in-out- トランジションは開始時に遅く進み、中間まで加速を続け、最後に向かって減速します。関数表記の
cubic-bezier(0.42, 0, 0.58, 1.0)と同等です。 cubic-bezier(p1, p2, p3, p4)- 任意の加速曲線を定義する関数です。
p1とp3の値は、0から1の範囲で指定しなければなりません。 steps(n, <jumpterm>)- いくつかの停止点を持つステップアニメーションを表す関数です。
nの数によってトランジション全体の長さを均等に分割し、一時的に停止するコマを定義します。<jumpterm>で開始や終わりのコマに関する処理を指定します。jump-none：トランジションをタイムラインの最初から再生します。jump-start：トランジションの最初にジャンプが発生します。jump-end：トランジションの最後にジャンプが発生します。jump-both：トランジションの最初と最後の両方にジャンプが発生します。start：トランジションの最初と最後の両方にジャンプが発生します。start：jump-startと同じ効果です。end：jump-endと同じ効果です。step-start：関数表記のsteps(1, jump-start)と同じ効果です。step-end：関数表記のsteps(1, jump-end)と同じ効果です。
transition-delayの使い方とサンプルコード
transition-delayプロパティの構文は以下の通りです。
/* キーワード値 */
transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;
transition-timing-function: step-start;
transition-timing-function: step-end;
/* 関数値 */
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
/* ステップ関数 */
transition-timing-function: steps(4, jump-none);
transition-timing-function: steps(4, jump-start);
transition-timing-function: steps(4, jump-end);
transition-timing-function: steps(4, jump-both);
transition-timing-function: steps(4, start);
transition-timing-function: steps(4, end);
/* 複数のタイミング関数 */
transition-timing-function: ease-in, linear, cubic-bezier(0.1, 0.7, 1.0, 0.1);
/* グローバル値 */
transition-timing-function: inherit;
transition-timing-function: initial;
transition-timing-function: revert;
transition-timing-function: unset;
transition-timing-functionの実例
それでは実際にtransition-timing-functionプロパティの書き方を見ていきましょう。以下の例は、変化の値が共通のボックスにトランジション効果を与えて、個別のtransition-timing-functionを指定した場合の挙動です。
加速曲線の違いを確認するために、チェックボックスで同時に変化するようにしました。何度かチェックボックスのON/OFFを切り替えて、開始地点と終了地点に至るまでの速度の違いを確かめて下さい。
<div class="samp_box">
<section>
<input type="checkbox" id="switch">
<label for="switch">Switch!</label>
<div id="ttf_1">transition-timing-function: ease;</div>
<div id="ttf_2">transition-timing-function: ease-in;</div>
<div id="ttf_3">transition-timing-function: ease-out;</div>
<div id="ttf_4">transition-timing-function: ease-in-out;</div>
<div id="ttf_5">transition-timing-function: linear;</div>
</section>
</div>
.samp_box {
overflow: auto;
padding: 0 1rem 1rem;
background-color: #eee;
}
.samp_box > section {
overflow: auto;
margin: 1rem 0 0;
padding: 1rem;
background-color: #fff;
}
section > div {
overflow: hidden;
width: 100%;
margin: 1rem 0 0;
padding: .5rem 1rem;
border: 1px solid #000;
background-color: #09f;
color: #fff;
white-space: nowrap;
transition-duration: 1s;
transition-property: width, background-color;
}
input, label {
cursor: pointer;
}
section > input:checked ~ div {
width: 20%;
background-color: #f90;
}
#ttf_1 {
transition-timing-function: ease;
}
#ttf_2 {
transition-timing-function: ease-in;
}
#ttf_3 {
transition-timing-function: ease-out;
}
#ttf_4 {
transition-timing-function: ease-in-out;
}
#ttf_5 {
transition-timing-function: linear;
}
ステップアニメーション風のトランジション効果
transition-timing-functionにsteps()関数を指定すると、ステップアニメーション風の効果が得られます。以下の例は、最初のサンプルを応用して時間経過の度合いをコマ送りにした時の挙動です。
トランジションが開始するタイミング、あるいは終了するタイミングでジャンプするコマをキーワードで指定できます。これにより、タイムラインのどの場所で停止するかを細かく調整することができます。
<div class="samp_box">
<section>
<input type="checkbox" id="switch">
<label for="switch">Switch!</label>
<div id="ttf_1">transition-timing-function: steps(4, jump-none);</div>
<div id="ttf_2">transition-timing-function: steps(4, jump-start);</div>
<div id="ttf_3">transition-timing-function: steps(4, jump-end);</div>
<div id="ttf_4">transition-timing-function: steps(4, jump-both);</div>
<div id="ttf_5">transition-timing-function: steps(8, jump-none);</div>
</section>
</div>
.samp_box {
overflow: auto;
padding: 0 1rem 1rem;
background-color: #eee;
}
.samp_box > section {
overflow: auto;
margin: 1rem 0 0;
padding: 1rem;
background-color: #fff;
}
section > div {
overflow: hidden;
width: 100%;
margin: 1rem 0 0;
padding: .5rem 1rem;
border: 1px solid #000;
background-color: #09f;
color: #fff;
white-space: nowrap;
transition-duration: 4s;
transition-property: width, background-color;
}
input, label {
cursor: pointer;
}
section > input:checked ~ div {
width: 20%;
background-color: #f90;
}
#ttf_1 {
transition-timing-function: steps(4, jump-none);
}
#ttf_2 {
transition-timing-function: steps(4, jump-start);
}
#ttf_3 {
transition-timing-function: steps(4, jump-end);
}
#ttf_4 {
transition-timing-function: steps(4, jump-both);
}
#ttf_5 {
transition-timing-function: steps(8, jump-none);
}