トランジションの遷移曲線を設定する

CSS - transition-timing-function

概要

CSSプロパティ｢transition-timing-function｣は、トランジションの初めから終わりの間の変化の度合いを指定します。指定する値によって、アニメーションの変化を｢一定｣にしたり、初めはゆっくりと終わりになるほど早くなどといった時間軸の調整をすることができます。

しかしこのプロパティだけでは変化を与えることができません。このプロパティの他に、変化させたいCSSプロパティを指定する transition-property、始まってから終わるまでの時間を指定する transition-duration、変化が始まる時間を指定する transition-delay を指定するか、それらをまとめて指定できるショートハンドプロパティ transition を使用します。

<p>カーソルをグレイの部分にあててみてください</p>
<div class="transition"></div>
<style>
div {
  width: 10%;
  height: 50px;
  background-color: #ddd;
}
div.transition:hover {
  background-color: #def;
  width: 100%;
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: ease;
　　transition-delay: 1s;
}
</style>

取りうる値

キーワード、もしくは cubic-bezier関数という４つの数値を指定する方法で指定します。

{ transition-property:  キーワード}
値説明ベジェ曲線の値
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.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(x軸の値, y軸の値, x軸の値, y軸の値)変化の度合いを3次ベジェ曲線で指定します。

各キーワードの変化について

実際に指定してみて、変化を比べてみましょう。全てのサンプルは3秒間の変化に対して、キーワードを設定しています。

<p>カーソルをグレイの部分にあててみてください</p>
<div class="transition"></div>
<div class="transition-ease"></div>
<div class="transition-linear"></div>
<div class="transition-ease-in"></div>
<div class="transition-ease-out"></div>
<div class="transition-ease-in-out"></div>
<style>
div {
  width: 10%;
  height: 30px;
  background-color: #ddd;
  margin-bottom: 10px;
}
.transition:hover {
  background-color: #def;
  width: 100%;
  transition-property: all;
  transition-duration: 3s;
  transition-timing-function: ease;
　　transition-delay: 1s;
}
.transition-ease:hover {
  background-color: #def;
  width: 100%;
  transition-property: all;
  transition-duration: 3s;
  transition-timing-function: ease;
　　transition-delay: 1s;
}
.transition-linear:hover {
  background-color: #def;
  width: 100%;
  transition-property: all;
  transition-duration: 3s;
  transition-timing-function: linear;
　　transition-delay: 1s;
}
.transition-ease-in:hover {
  background-color: #def;
  width: 100%;
  transition-property: all;
  transition-duration: 3s;
  transition-timing-function: ease-in;
　　transition-delay: 1s;
}
.transition-ease-out:hover {
  background-color: #def;
  width: 100%;
  transition-property: all;
  transition-duration: 3s;
  transition-timing-function: ease-out;
　　transition-delay: 1s;
}
.transition-ease-in-out:hover {
  background-color: #def;
  width: 100%;
  transition-property: all;
  transition-duration: 3s;
  transition-timing-function: ease-in-out;
　　transition-delay: 1s;
}

</style>

 

transition関連のプロパティの一覧

指定された値がそれぞれどういった振る舞いをするかは transition プロパティページで解説していますので、参照してみてください。

プロパティ名説明
transition以下のプロパティをまとめて指定できるショートハンドプロパティ
transition-delay変化が始まる時間を指定する
transition-duration始まってから終わるまでの時間を指定する
transition-property変化させたいCSSプロパティを指定する
transition-timing-function変化の度合いを指定する

使用例

よくみられる使用例で、マウスホバー時のアニメーションあります。ホバーしているボタンの背景色が変わることはよくありますが、そこにこのプロパティを使うと、その背景色の変化が滑らかになります。ユーザー体感を向上させる１つの工夫といえるでしょう。

｢transition-timing-function｣の値を変更してみて、どのような動きの変化があるか確認してみてください。

<p>上記の内容を送信しますか？</p>
<button>はい</button>
<button>いいえ</button>
<style>
button {
  padding: 10px;
  width: 100px;
  border-radius: 4px;
  background-color: #fff;
}
button:hover {
  background-color: #ddd;
  font-size: 14px;
  width: 150px;
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: ease;
  transition-delay: 0s;
}
</style>

仕様書

 

関連CSSプロパティ