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

css辞典 CSS辞典
この記事は約3分で読めます。

トランジションを適用するプロパティを指定する「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

コメント

タイトルとURLをコピーしました