CSS transition-duration 속성이란?
transition-duration 속성은 CSS에서 전환(트랜지션) 효과가 진행되는 데 걸리는 시간을 설정하는 데 사용됩니다. 이 속성을 활용하면 요소의 크기, 색상, 위치 등 스타일 변화가 즉각적으로 바뀌지 않고, 지정한 시간 동안 부드럽게 애니메이션처럼 나타납니다.
시간 단위는 초(s) 또는 밀리초(ms)로 지정할 수 있으며, 기본값은 0s입니다. 즉, 별도로 지속 시간을 설정하지 않으면 전환 효과 없이 상태가 즉시 변경됩니다.
예제
아래 예제에서는 div 요소에 마우스를 올리면 높이가 2초에 걸쳐 서서히 늘어나도록 설정했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 150px;
background: blue;
transition-property: height;
transition-duration: 2s;
}
div:hover {
height: 200px;
}
</style>
</head>
<body>
<h1>Heading One</h1>
<p>아래 박스에 마우스를 올려보세요. 높이가 부드럽게 변합니다.</p>
<div></div>
</body>
</html>예제 설명
위 코드에서 transition-property: height;는 높이 속성에만 전환 효과를 적용하겠다는 의미이며, transition-duration: 2s;는 그 변화가 2초 동안 천천히 진행되도록 지정합니다. 따라서 박스에 마우스 커서를 올리면(:hover) 높이가 150px에서 200px로 점프하지 않고, 2초에 걸쳐 자연스럽게 늘어나는 것을 확인할 수 있습니다.
활용 팁
- 여러 속성에 각각 다른 시간 적용: 쉼표로 구분하여 값을 나열하면 여러 속성에 서로 다른 지속 시간을 지정할 수 있습니다. 예:
transition-duration: 1s, 2s; - 밀리초 단위 사용: 더 짧고 정밀한 전환을 원한다면
500ms처럼 밀리초 단위를 사용할 수 있습니다. - transition 축약형 활용:
transition: height 2s;처럼 한 줄로 속성과 지속 시간을 함께 작성하면 코드가 더 간결해집니다.