CSS의 transition 속성은 네 가지 개별 전환 속성을 한 줄의 코드로 간결하게 설정할 수 있는 단축(shorthand) 속성입니다.
이 속성 하나만 사용하면 transition-property, transition-duration, transition-timing-function, transition-delay를 각각 따로 지정할 필요 없이, 요소의 상태 변화에 부드러운 애니메이션 효과를 손쉽게 적용할 수 있습니다.
기본 문법
transition: property duration timing-function delay;
- property – 전환 효과를 적용할 CSS 속성 (예: width, height, background)
- duration – 전환이 완료되는 데 걸리는 시간 (예: 3s, 500ms)
- timing-function – 전환 속도의 변화 패턴 (예: ease, linear)
- delay – 전환이 시작되기 전 대기 시간
예제
아래 예제에서는 박스에 마우스를 올리면(hover) 높이가 3초에 걸쳐 부드럽게 변하는 효과를 구현했습니다. 직접 실행해 보며 transition 속성의 동작 방식을 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 150px;
background: blue;
transition: height 3s;
}
div:hover {
height: 250px;
}
</style>
</head>
<body>
<h1>Heading One</h1>
<p>아래 박스 위에 마우스를 올려보세요. 높이가 부드럽게 변합니다.</p>
<div></div>
</body>
</html>코드 설명
위 예제에서 transition: height 3s;는 height 속성의 변화를 3초 동안 서서히 진행하겠다는 의미입니다. 마우스 커서를 박스 위에 올리면 :hover 선택자에 의해 높이가 150px에서 250px로 즉시 변경되는 것이 아니라, 3초에 걸쳐 자연스럽게 늘어나는 애니메이션이 나타납니다.
이처럼 transition 속성을 활용하면 버튼, 메뉴, 카드 등 다양한 UI 요소에 세련된 인터랙션 효과를 간단하게 추가할 수 있습니다.