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

transition-duration CSS プロパティとは

トピック:トランジションエフェクトが完了するまでの時間(秒)またはミリ秒(ms)を指定する、ことができる

プロパティ transition-duration

実例 コード 1

サンプル コードを試す
     div {
        transition-duration: 5s;
    }
    情報:timeプロパティの元の値から新しい値へ遷移するのにかかる時間を表す <time> 形式の値。
    トピック:アニメーションを完了するためにトランジションがかかる時間(秒又は 、ミリ秒)を指定します。 デフォルト値は0秒で、アニメーションが実行されないことを示す

プロパティ

デフォルト値・初期値 :0s
適用対象 :全要素、::before / ::after 疑似要素
継承 :不可
メディア :interactive
計算値 :指定値
CSS Version CSS3
Animation type :discrete
JavaScript 構文 object.style.transitionDuration="1s"
正規順序 :形式文法で定義される一意のあいまいでない順序
CSSの構文transition-duration: time |initial |inherit;(transition-delay: 時間|初期|継承)

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

機能ChromeFirefoxInternet ExplorerOperaSafari
基本サポート(有) -webkit4.0 (2.0) -moz1010.5 -o3.1 -webkit

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

機能AndroidFirefox MobileIE MobileOpera MobileSafari Mobile
基本サポート不明不明不明不明iOS 2.0 -webkit
transition-duration 関連記事
CSS transition-duration アニメーション| CSS:スタイルシート 関数 要素 使い方・書き方 例 CSS サンプル
CSS transition-duration アニメーション | CSS プロパティ 値| 意味 使い方 実例 – WebRef
あわせて読みたい

Html

Glossary

PHP

JavaScript

JQuery

CSS