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: 時間|初期|継承) |
|---|
サポートするデスクトップ ブラウザ対応・互換性
| 機能 | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|
| 基本サポート | (有) -webkit | 4.0 (2.0) -moz | 10 | 10.5 -o | 3.1 -webkit |
|---|
サポートするモバイル ブラウザ対応・互換性
| 機能 | Android | Firefox Mobile | IE Mobile | Opera Mobile | Safari Mobile |
|---|
| 基本サポート | 不明 | 不明 | 不明 | 不明 | iOS 2.0 -webkit |
|---|
:transition-duration 関連記事
CSS transition-duration アニメーション | CSS プロパティ 値| 意味 使い方 実例 – WebRef