備忘録的プログラミングリファレンス

transition プロパティ

 transition プロパティは、CSS アニメーションを簡易に定義する CSS のプロパティです。
 :hover:focus といった疑似クラスによるスタイルの変更を、滑らかな CSS アニメーションにすることができます。

 transitionプロパティはtransition-propertytransition-durationtransition-timing-functiontransition-delayプロパティの機能を一括して定義できます。

 基本的には、以下のように CSS アニメーション化したい CSS プロパティを指定します。ここでは background, width, height プロパティに関する変化を任意の動きに指定しています。

transitionプロパティ
div.example {
	background-color: green; width:300px; height:300px;
	transition: background,width,height 5s ease-in-out 1s;
}

div.example:hover {
	background-color:yellow; width:100px; height:100px;
}
詳しくは「Example」を参照してください

 transition プロパティは、CSS アニメーション化したいプロパティと動作時間、動き方、開始までの待ち時間を指定します。

 似たプロパティに、animation プロパティがあります。より詳細で、疑似クラスによるスタイルの変化を伴わない場合は animation プロパティを利用します。
 :hover や :focus といった疑似クラスによるスタイルの変更を、滑らかな動きにしたい場合は transition プロパティの方がより簡易にできます。

 注意点としては、transition プロパティは、エレメントに動きを与えますが、CSSアニメーションが機能するCSSプロパティのみに有効です。

ページ内 Index

構文(Syntax)

CSS

transition: [ propertydurationtiming-functiondelay ] | initial | inherit;

DOM ( JavaScript )

値の取得
String = object.style.transition;
値の設定
object.style.transition="[ propertydurationtiming-functiondelay ] | initial | inherit";

値(Values)

Value摘要
property動作をするプロパティ名を指定
duration動作が完了までの時間を秒で設定
timing-function動作の変化の仕方を定義
delay動作を開始するまでの時間を秒で設定
initial初期値に戻します。
inherit親要素(親エレメント)のプロパティを継承します。

Example

 transitionの例です。 transitionの第1引数で指定されたCSSプロパティがCSSアニメーションの対象です。ここでは、back-shadowプロパティです。

 マウスをエレメントに乗せてから0.3秒後にCSSアニメーションが始まります。 さらに、マウスをエレメントから離すと0.3秒後に戻るアニメーションが始まります。