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-duration や transition-timing-function は最低限必要になると思います。
　transition プロパティによって一括指定ができます。

　似たプロパティで 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プロパティで一括指定する方法もあります。