プロパティ値を徐々に変化させる

プロパティ値を徐々に変化させるには、transitionプロパティを使用します。

transition:[変化させるプロパティ値] [変化にかける時間] [速度のパターン] [遅延]

速度のパターンは、以下の物があります。

速度のパターン	内容
linear	一定速度
ease	少し減速して開始、少し減速して終了
ease-in	減速して開始
ease-out	減速して終了
ease-in-out	減速して開始、減速して終了

transitionプロパティはｍ「変化させるプロパティ」「変化にかける時間」「速度のパターン」「遅延」等全てを一括で指定できますが、それぞれ個別に指定するプロパティもあります。
transition-property:変化させるプロパティを指定
transition-duration:変化にかける時間を指定
transition-timing-function:速度の変化パターンを指定
transition-delay:遅延を指定

本項執筆時点では、Firefoxのバージョン５以降、Operaの１０．５以降、Safariの４以降、Chromeの３以降でないと正常に動作しないようです。

---

マウスを乗せると文字が変化します。

---

<style type="text/css">
p {
    -webkit-transition:all 2s linear;
    -moz-transition:all 2s linear;
    transition:all 2s linear;
    font-size:20;
    color:#0000BB;
}
p:hover {
    font-size:30px;
    color:#000000;
}
</style>
<p>マウスを乗せると文字が変化します。</p>