CSS: transition-property プロパティを指定する

CSS3からトランジション効果を実現できるようになりました。 トランジション(遷移)とは、あるスタイルを別のスタイルへ変化させる効果のことです。 例えば、div 要素の背景色を赤色から青色に滑らかに変化させることができます。

どのプロパティを遷移させるのかを指定するのが transition-property プロパティです。

トランジションを実現するためには次の指定が必要となります。

  • トランジション効果を実現するプロパティ(例えば、background-color、color等)
  • 開始時の値と遷移終了時の値
  • 変化にかかる時間

「transition-property」プロパティでトランジション効果を実現するプロパティを指定し、 変化にかかる時間は 「transition-duration 」プロパティで指定します。

transition-property プロパティの使用例


div {
    transition-property: color;
    transition-duration: 2s;
    color: red;
}

div:hover {
    color: blue;
}

上のコードでは、div 要素の文字色が赤色から青色にかわります。 遷移にかかる時間は2秒です。

トランジション効果を実現するサンプルコード

下の div 要素に対してトランジション効果を実現します。 div 要素の背景色を赤色から青色に変化させます。

マウスカーソルがのったら赤色から青色に遷移し、 マウスカーソルが外れたら青色から赤色に遷移します。 遷移にかかる時間は1秒です。


<div class="sample1"></div>

<style>
    div.sample1 {
        width: 300px;
        height: 100px;
        background-color: red;
        transition-property: background-color;
        transition-duration: 1s;
    }
    div.sample1:hover {
        background-color: blue;
    }
</style>

HTML・CSS入門