CSS에서 전환(Transition) 효과를 구현하려면 transition 속성을 사용합니다. 이 속성을 활용하면 요소의 스타일이 변경될 때 즉시 바뀌는 것이 아니라, 지정한 시간 동안 부드럽게 변화하는 애니메이션 효과를 만들 수 있습니다.
CSS Transition 기본 사용법
transition 속성은 다음과 같은 형식으로 작성합니다.
transition: 속성명 지속시간 타이밍함수 지연시간;
- 속성명(property): 변화를 적용할 CSS 속성 (예: width, height, background)
- 지속시간(duration): 전환이 완료되기까지 걸리는 시간 (예: 4s, 0.5s)
- 타이밍 함수(timing-function): 변화의 속도 곡선 (예: ease, linear) — 생략 가능
- 지연시간(delay): 전환이 시작되기까지의 대기 시간 — 생략 가능
CSS 전환 예제 코드
아래 예제는 박스에 마우스를 올리면(hover) 너비가 4초에 걸쳐 부드럽게 늘어나는 코드입니다. 직접 실행해 보세요.
예제
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 150px;
background: blue;
transition: width 4s;
}
div:hover {
width: 200px;
}
</style>
</head>
<body>
<h1>Heading One</h1>
<p>아래 박스에 마우스를 올려보세요. 너비가 서서히 변합니다.</p>
<div></div>
</body>
</html>코드 설명
위 예제의 핵심은 두 가지입니다.
transition: width 4s;— div 요소의 너비(width)가 변경될 때 4초에 걸쳐 천천히 변하도록 설정했습니다.div:hover { width: 200px; }— 마우스 커서를 올리면 너비가 150px에서 200px로 변경되며, 이때 transition 효과가 적용되어 부드럽게 확장됩니다.
여러 속성에 전환 적용하기
하나의 요소에 여러 속성의 전환을 동시에 적용하고 싶다면 쉼표로 구분하여 작성할 수 있습니다.
div {
transition: width 4s, height 2s, background-color 1s;
}이렇게 하면 너비는 4초, 높이는 2초, 배경색은 1초에 걸쳐 각각 부드럽게 변화합니다. CSS 전환을 활용하면 JavaScript 없이도 자연스러운 사용자 인터페이스 애니메이션을 손쉽게 구현할 수 있습니다.