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

スポンサーリンク

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

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

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

「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>

役立ちツール

CSS 基本事項

CSS セレクタ

CSS テキスト・フォント

CSS 色・画像・背景

CSS ボックス

トランジション

リスト

テーブル

CSS レイアウト

CSS その他

用語

関連サイト