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

transition-property プロパティ

 transition-property プロパティは、CSS アニメーションとして表現したいプロパティを指定する CSS です。このプロパティでアニメーションのように滑らかな動きを与えたい CSS プロパティを指定します。

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

background,width,heightプロパティをCSSアニメーション化
transition-property: background;
transition-duration: 5s;
transition-timing-function: ease-in-out;
詳しくはExampleを参照してください

 CSS プロパティをアニメーション化するプロパティには、transitiontransition-delaytransition-durationtransition-timing-function があります。

 transition-property プロパティによって CSS アニメーションとして動作させるには、transition-durationtransition-timing-function は必要でしょう。

 似たプロパティで animation プロパティを使う方法があります。
 このプロパティも CSS アニメーションが機能する CSS のプロパティのみに有効です。このプロパティは、より詳細な設定ができます。

 ここでいう CSS アニメーションとは、CSS プロパティによる表示をアニメーションのように滑らかに変化するようにするもので、一般的なアニメーション処理のように自由度はありません。

ページ内 Index

構文(Syntax)

CSS

transition-property: all | none | property-name | initial | inherit;

DOM ( JavaScript )

値の取得
String = object.style.transitionProperty;
値の設定
object.style.transitionProperty="all | none | property-name | initial | inherit";

値(Values)

 プロパティ名はカンマ","で区切ります。

Value摘要
all初期値(default値)
none設定しない
property-nameプロパティ名(カンマ","で区切る)
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

初期値(Default value)all
継承(Inherited)No
CSS AnimationNo

Example

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

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

 transitionプロパティで一括指定する方法もあります。