CSS 전환(Transition)이란 무엇인가?
CSS 전환(Transition) 효과를 사용하면 요소의 속성값을 부드럽고 자연스럽게 변경할 수 있습니다. 값이 한순간에 바뀌는 것이 아니라, 지정한 지속 시간(duration) 동안 점진적으로 변화하기 때문에 훨씬 세련된 사용자 경험을 만들 수 있습니다.
전환 효과는 버튼, 메뉴, 카드 등 다양한 UI 요소에 활용되며, 별도의 JavaScript 없이 CSS만으로 간단하게 구현할 수 있다는 장점이 있습니다.
예제: 요소의 높이 변경하기
아래 예제에서는 마우스 커서를 박스 위에 올리면(:hover) 높이가 150px에서 200px로 3초에 걸쳐 서서히 늘어나도록 설정했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 150px;
background: blue;
transition: height 3s;
}
div:hover {
height: 200px;
}
</style>
</head>
<body>
<h1>Heading One</h1>
<p>아래 박스에 마우스를 올려보세요. 높이가 부드럽게 변합니다.</p>
<div></div>
</body>
</html>
코드 설명
transition: height 3s;—height속성의 변화가 3초에 걸쳐 천천히 일어나도록 설정합니다.div:hover— 마우스 커서를 요소 위에 올렸을 때 적용되는 스타일로, 이때 높이가 200px로 변경됩니다.- 전환 효과가 없다면 높이가 즉시 바뀌어 어색하게 보이지만,
transition을 사용하면 자연스러운 애니메이션처럼 표현됩니다.
이처럼 CSS 전환은 transition 속성 하나만으로도 요소에 생동감을 더할 수 있는 강력한 도구입니다.