トランジションを適応するCSSプロパティを指定する

CSS - transition-property

概要

CSSプロパティ｢transition-property｣は、効果を適用するCSSプロパティ名を指定する際に使用します。

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

取りうる値

基本的には適用させたいCSSプロパティを指定します。複数指定したい場合はカンマで区切って指定します。

{ transition-property:  cssプロパティ名, cssプロパティ名,}
値説明
all初期値です。変化可能なプロパティ全てに適用されます
none変化しません
cssプロパティ名変化させたいプロパティを指定します

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

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

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

使用例

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

｢transition-property｣には width,  font-size,  background-color を変化するように指定しています。このプロパティからいくつか抜いてみたり、または「all」を指定するとどのような変化があるか確認してみてください。

<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: width, font-size, background-color;
  transition-duration: 1s;
  transition-timing-function: ease;
  transition-delay: 0s;
}
</style>

仕様書

 

関連CSSプロパティ