CSS transition-duration으로 전환 효과 지속 시간(초·밀리초) 설정하는 방법

CSS에서 transition-duration 속성을 사용하면 전환(트랜지션) 효과가 시작부터 완료까지 걸리는 시간을 초(s) 또는 밀리초(ms) 단위로 지정할 수 있습니다.

transition-duration 기본 문법

transition-duration: time | initial | inherit;

시간 값은 초 단위(2s) 또는 밀리초 단위(2000ms)로 표현하며, 기본값은 0s입니다. 즉, 이 속성을 설정하지 않으면 전환 효과가 즉시 적용되어 애니메이션이 나타나지 않습니다.

예제

아래 예제에서는 박스에 마우스를 올리면(hover) 높이가 변화하며, 이 전환이 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>Hover over the below box to change its height.</p>
      <div></div>
   </body>
</html>

코드 설명

transition-property: height; — 높이 속성에만 전환 효과를 적용합니다.
transition-duration: 2s; — 전환 효과가 2초 동안 진행되도록 설정합니다.
div:hover — 마우스를 올렸을 때 높이가 150px에서 200px로 변경됩니다.

참고 사항

여러 속성에 서로 다른 지속 시간을 적용하려면 쉼표로 구분하여 값을 나열할 수 있습니다. 예를 들어 transition-duration: 1s, 2s;처럼 작성하면 첫 번째 속성은 1초, 두 번째 속성은 2초 동안 전환됩니다. 짧은 지속 시간(0.3s~0.5s)은 버튼이나 링크 같은 UI 요소에 자연스러운 반응성을 부여하는 데 적합합니다.