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 プロパティをアニメーション化するプロパティには、transition、transition-delay、transition-duration、transition-timing-function があります。

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

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

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

構文(Syntax)

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

値の取得

String = object.style.transitionProperty;

値の設定

object.style.transitionProperty="all | none | property-name | initial | inherit";

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

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

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

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