CSS의 전환(Transition) 효과는 요소의 스타일이 이전 값에서 새로운 값으로 즉시 바뀌지 않고, 일정한 시간에 걸쳐 부드럽게 변하도록 만들어 주는 기능입니다. 마우스 오버(hover), 클릭 등의 이벤트와 함께 활용하면 훨씬 자연스럽고 세련된 웹 인터페이스를 구현할 수 있습니다.
전환 효과 설정 방법
전환 효과를 적용하려면 transition 속성에 변화를 줄 CSS 속성(property)과 효과의 지속 시간(duration)을 함께 지정해야 합니다.
transition: height 5s;
위 코드는 요소의 높이(height)가 변할 때 그 변화가 5초에 걸쳐 천천히 일어나도록 설정한 것입니다.
전환 효과 예제
다음은 박스 위에 마우스를 올리면 너비가 3초 동안 서서히 늘어나는 예제입니다. 코드를 직접 실행해 보며 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 150px;
background: blue;
transition: width 3s;
}
div:hover {
width: 250px;
}
</style>
</head>
<body>
<h1>제목</h1>
<p>아래 박스 위로 마우스를 올려보세요. 너비가 변경됩니다.</p>
<div></div>
</body>
</html>
동작 원리
- 기본 상태: div 요소는 너비 150px의 파란색 박스로 표시됩니다.
- :hover 상태: 마우스를 올리면 너비가 250px로 변경되도록 지정되어 있습니다.
- transition: width 3s; 덕분에 너비가 갑자기 바뀌지 않고 3초에 걸쳐 부드럽게 늘어나게 됩니다.
함께 알아두면 좋은 transition 관련 속성
transition-property– 전환 효과를 적용할 CSS 속성을 지정합니다.transition-duration– 전환이 완료되기까지 걸리는 시간을 지정합니다.transition-timing-function– 전환의 속도 곡선(ease, linear, ease-in 등)을 지정합니다.transition-delay– 전환이 시작되기 전의 대기 시간을 지정합니다.
이 속성들은 아래와 같이 축약형으로 한 번에 작성할 수도 있습니다.
transition: width 3s ease-in 1s;
전환 효과를 잘 활용하면 별도의 JavaScript 없이도 CSS만으로 역동적이고 매끄러운 사용자 경험을 만들 수 있습니다.