CSS transition| CSS:スタイルシート 関数 要素 使い方・書き方 例 CSS サンプル

transition CSS プロパティとは

トピック：遷移プロパティの省略形プロパティ。遷移を使用すると要素の2つの状態間の変更を定義する事ができる 各状態は、ホバー（:hover）アクティブ（:active）またはJavaScriptを使用して動的に設定されるような疑似クラスとして定義される

プロパティ transition

    情報：
  • CSS3トランジション機能を使用すると、CSSプロパティ値の変更を指定された 、期間にわたってスムーズに実行できる 通常、CSSプロパティの値が変更されると、レンダリングされた結果が瞬時に更新する 一般的な例は、マウスのホバー上のボタンの背景色を変更することです。通常のシナリオでは、ボタンの上にカーソルを置くと、ボタンの背景色は直ちに古いプロパティ値から新しいプロパティ値に変更されます 。

実例 コード 1

サンプル コードを試す
  • button {
  • background: #fd7c2a;
  • -webkit-transition-property: background 2s; /* For Safari 3.0+ */
  • transition: background 2s; /* Standard syntax */
  • }
  • button:hover {
  • background: #3cc16e;
  • }

実例 コード 2

サンプル コードを試す
    div {
         width: 100px;
        transition: width 2s;
    }

     div:hover {
        width: 300px;
    }

CSSコード：例


    /* 1つのプロパティへの適用 */
       transition: margin-right 4s;
    /* プロパティ名 | 時間 */
       transition: margin-right 4s 1s;
    /* プロパティ名 | 時間 | 遅延 */
       transition: margin-right 4s ease-in-out;
    /* プロパティ名 | 時間 | 時間関数 */
       transition: margin-right 4s ease-in-out 1s;
    /* プロパティ名 | 時間 | 時間関数 | 遅延 */
       transition: margin-right 4s, color 1s;
    /* 2つのプロパティへの適用 */
       transition: all 0.5s ease-out;
    /* 変化するすべてのプロパティへの適用 */
       transition: inherit;   transition: initial;   transition: unset;
    /* グローバル値 */

プロパティ

デフォルト値・初期値 :以下の一括指定の各プロパティとして
適用対象 :全要素、::before / ::after 疑似要素
継承 :不可
メディア :interactive
計算値 :以下の一括指定の各プロパティとして
CSS Version CSS3
アニメーションの種類 :個別
JavaScript 構文 object.style.transition="all 2s"
正規順序 :形式文法における値の出現順
CSSの構文transition: property, duration, timing-function, delay |initial |inherit;

サポートするデスクトップ ブラウザ対応・互換性

PropertyDesktop 互換性
transitionChromeEdgeFirefoxInternet ExplorerOperaSafari
基本 サポートフルサポート◯26フルサポート◯12フルサポート◯16フルサポート◯10フルサポート◯12.1フルサポート◯6.1

サポートするモバイル ブラウザ対応・互換性

PropertyMobile 互換性
transitionAndroidChrome for Android
Edge MobileFirefox for Android
Opera for Android
iOS SafariSamsung Internet
基本 サポートフルサポート◯ありフルサポート◯26フルサポート◯12フルサポート◯16フルサポート◯12.1フルサポート◯ありフルサポート◯あり
：transition 関連記事
CSS transition| CSS:スタイルシート 関数 要素 使い方・書き方 例 CSS サンプル
CSS transition | CSS プロパティ 値| 意味 使い方 実例 – WebRef
あわせて読みたい

Html

Glossary

PHP

JavaScript

JQuery

CSS