transition-duration
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年9月.
transition-duration は CSS のプロパティで、トランジションによるアニメーションが完了するまでの再生時間を秒数またはミリ秒数で指定します。既定値は 0s であり、これはアニメーションを実行しないことを示します。
試してみましょう
transition-duration: 500ms; transition-property: margin-right; transition-duration: 2s; transition-property: background-color; transition-duration: 2s; transition-property: margin-right, color; transition-duration: 3s, 1s; transition-property: margin-right, color; <section id="default-example"> <div id="example-element">Hover to see<br />the transition.</div> </section> #example-element { background-color: #e4f0f5; color: #000; padding: 1rem; border-radius: 0.5rem; font: 1em monospace; width: 100%; transition: margin-right 2s; } #default-example:hover > #example-element { background-color: #909; color: #fff; margin-right: 40%; } 複数の再生時間を指定することができます; それぞれの再生時間は、マスターリストとして機能する transition-property プロパティによって指定された、対応するプロパティに適用されます。指定する再生時間の数がマスターリストより少ない場合、ユーザーエージェントは再生時間のリストを繰り返します。指定した再生時間の数がマスターリストより多い場合、リストは正しいサイズに切り詰められます。どちらの場合でも、 CSS 宣言は有効です。
構文
css
/* <time> 値 */ transition-duration: 6s; transition-duration: 120ms; transition-duration: 1s, 15s; transition-duration: 10s, 30s, 230ms; /* グローバル値 */ transition-duration: inherit; transition-duration: initial; transition-duration: revert; transition-duration: revert-layer; transition-duration: unset; 値
公式定義
形式文法
transition-duration =
<time [0s,∞]>#
例
様々な再生時間を表す例
HTML
html
<div class="box duration-1">0.5 seconds</div> <div class="box duration-2">2 seconds</div> <div class="box duration-3">4 seconds</div> <button id="change">Change</button> CSS
css
.box { margin: 20px; padding: 10px; display: inline-block; width: 100px; height: 100px; background-color: red; font-size: 18px; transition-property: background-color, font-size, transform, color; transition-timing-function: ease-in-out; } .transformed-state { transform: rotate(270deg); background-color: blue; color: yellow; font-size: 12px; transition-property: background-color, font-size, transform, color; transition-timing-function: ease-in-out; } .duration-1 { transition-duration: 0.5s; } .duration-2 { transition-duration: 2s; } .duration-3 { transition-duration: 4s; } JavaScript
js
function change() { const elements = document.querySelectorAll("div.box"); for (const element of elements) { element.classList.toggle("transformed-state"); } } const changeButton = document.querySelector("#change"); changeButton.addEventListener("click", change); 結果
仕様書
| Specification |
|---|
| CSS Transitions # transition-duration-property |