CSS의 transition 속성을 활용하면 요소의 크기가 변할 때 갑작스럽게 바뀌지 않고 부드럽게 애니메이션되도록 만들 수 있습니다. 아래 예제에서는 마우스 커서를 박스 위에 올리면(hover) 너비와 높이가 3초에 걸쳐 서서히 확대되도록 구현했습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 150px;
background: blue;
transition: width 3s, height 3s;
}
div:hover {
width: 250px;
height: 250px;
}
</style>
</head>
<body>
<h1>Heading One</h1>
<p>아래 박스에 마우스를 올려보세요. 너비와 높이가 함께 변합니다.</p>
<div></div>
</body>
</html>코드 설명
위 코드의 핵심은 transition 속성입니다. 기본 상태의 div 요소에는 transition: width 3s, height 3s;가 적용되어 있어, 너비와 높이 값이 변경될 때 각각 3초 동안 천천히 변화합니다.
:hover 가상 클래스를 통해 마우스를 올리면 너비와 높이가 각각 150px에서 250px로 늘어나며, 이 변화가 즉시 일어나지 않고 지정한 시간만큼 부드럽게 진행됩니다.
적용 팁
- 여러 속성 동시 적용: 쉼표(,)로 구분하여
transition: width 3s, height 3s;처럼 여러 속성에 각각 다른 시간을 지정할 수 있습니다. - 모든 속성에 일괄 적용:
transition: all 3s;를 사용하면 변화하는 모든 속성에 전환 효과가 적용됩니다. - 타이밍 함수 추가:
ease-in-out,linear등을 함께 지정하면 더욱 자연스러운 움직임을 연출할 수 있습니다.