トランジッション関連のCSSプロパティを設定するショートハンド

CSS - transition

概要

CSSプロパティ｢transition｣は、指定した時間内で要素に変化あたえることができるtransition関連のプロパティをまとめて設定するショートハンドです。

内容としては、変化させたいCSSプロパティを指定する transition-property、始まってから終わるまでの時間を指定する transition-duration、変化の度合いを指定する transition-timing-function、変化が始まる時間を指定する transition-delay の4種類です。

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

取りうる値

値の指定する順番には決まりがあり、以下のとおり書く必要があります。

{ transition: transition-propertyの値 transition-durationの値 transition-timing-functionの値 transition-delayの値}

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

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

値の解説

各プロパティ詳細についてはそれぞれのページで解説しますが、上記で紹介した例を元に簡単に値についての確認をしておきましょう。

transitionを指定した内容

こちらを元にみていきましょう。解説している箇所の値はカッコで囲っています。

{ 
  transition: all 1s ease-in 1s;
  background-color: #def;
  width: 100%;
}

transition-propertyの値について

{ 
  transition: { (all) 1s ease-in 1s;
}

ここの指定では｢all｣を指定しています。これはこのプロパティ全てにtransition効果を付与します。ですのでこの例でいうと、background-color プロパティと width プロパティが該当するということになります。

transition-durationの値

{ 
  transition: { all (1s) ease-in 1s;
}

ここでは｢1s｣を指定しています。これは1秒（second）を指定しており、要素にマウスがホバーされてから、1秒をかけて変化をする。という指定となっています。

transition-timing-functionの値

{ transition: { all 1s (ease-in) 1s; }

ここでは、｢ease-in｣を指定しています。これはアニメーションが変化する時間の進み方を用意されているキーワードを使って指定していますが、この｢ease-in｣だと、アニメーションの始まりをゆっくりするような時間軸となっています。他キーワードについては [css]transition-timing-function[/cssp] ページを参照してみてください。

transition-delayの値

{ transition: { all 1s ease-in (1s); }

ここでは、｢1s｣を指定しています。これはアニメーションを開始する時間を指定しており、この例ではカーソルが当たってから1秒後にアニメーションが始まります。

使用例

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

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

仕様書

CSS Transitions

概要