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

transition プロパティ

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

　transition プロパティはtransition-property、transition-duration、transition-timing-function、transition-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

transition の関連プロパティ

　transition に関連するプロパティには以下があります。

transition以下のプロパティを一括指定
transition-property動きを与えるCSSプロパティを指定
transition-delayCSSアニメーションの始まるまでの時間
transition-durationCSSアニメーションの動作にかかる時間
transition-timing-functionCSSアニメーションの動き方

構文(Syntax)

CSS

transition: [ property、duration、timing-function、delay ] | initial | inherit;

DOM ( JavaScript )

値の取得
String = object.style.transition;
値の設定
object.style.transition="[ property、duration、timing-function、delay ] | initial | inherit";

値（Values）

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

Example

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

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

関連（Related）