トランジッション効果の長さを設定する

CSS - transition-duration

概要

CSSプロパティ｢transition-duration｣は、指定した要素の変化に掛かる時間を指定することができます。

しかしこのプロパティだけでは変化を与えることができません。このプロパティの他に、変化させたいCSSプロパティを指定する transition-property、変化の度合いを指定する transition-timing-function、変化が始まる時間を指定する 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; /* 1秒（s）かけて変化します */
  transition-timing-function: ease;
　　transition-delay: 1s;
}
</style>

取りうる値

値は、単位はs（秒）、ms（ミリ秒）で指定することができます。マイナスの値は0として扱われます。

{ transition-duration:  値}
値説明
時間初期値は0sです。 単位はs（秒）、ms（ミリ秒）で指定できます。

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

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

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

使用例

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

｢transition-duration: 0.4s｣の値を変更してみてどのような変化があるか確認してみてください。

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

仕様書

 

関連CSSプロパティ