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> values */ transition-duration: 6s; transition-duration: 120ms; transition-duration: 1s, 15s; transition-duration: 10s, 30s, 230ms; /* Global values */ transition-duration: inherit; transition-duration: initial; transition-duration: revert; transition-duration: revert-layer; transition-duration: unset; 값
형식 정의
| 초기값 | 0s |
|---|---|
| 적용대상 | all elements, ::before and ::after pseudo-elements |
| 상속 | no |
| 계산 값 | as specified |
| Animation type | Not animatable |
형식 구문
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 |