CSS辞典 transition-propertyプロパティ解説

トランジションを適用するプロパティを指定する「transition-propertyプロパティ」の使用方法を記載

対応バージョン:CSS3/2.1

対応ブラウザ

ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera
初期値all
適用される要素すべての要素(::before疑似要素、::after疑似要素を含む)
モジュールCSS Transitions
継承なし

概要・使用方法

{ transition-property: プロパティ名;}

「transition-propertyプロパティ」は、トランジションを適用するプロパティを指定します。トランジション効果とは時間的変化のことです。「:hover」やユーザーアクション疑似クラス、JavaScriptを使用することで、ユーザーの動きに合わせてトランジション効果を付けられます。マウスオーバーで背景の色を変化させたりすることができます。

プロパティ名はカンマ(,)で区切って複数指定することができます。

指定できる値(プロパティ名)

プロパティ名変化を適用するプロパティ名を指定します。カンマ(,)で区切って複数指定できます。
allトランジションを適応可能なすべてのプロパティに適用します。
noneどのプロパティにも効果を適用しません。

サンプルコード

div要素にマウスオーバーしたときに背景色とサイズがふわっと変更されます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>transition-propertyプロパティCSSフォントサンプルページ</title>
    <meta charset="uft-8">
    <style>
    
    .transition-btn{
        width:400px;
        height:30px;
        text-align:center;
        background-color:silver;
        transition-property: background-color,width;
        transition-duration: 2s;   
    }
    .transition-btn:hover{
         background-color:red;
         width:200px;
    }
    </style>
  </head>
  <body>
      <div class="btn">transition-property</div>
  </body>
</html>

実行結果

transition-property