CSS transition-property란 무엇인가?
transition-property는 CSS에서 전환(트랜지션) 효과가 적용될 속성의 이름을 지정하는 데 사용되는 속성입니다. 이 속성을 활용하면 요소의 특정 스타일 값이 변경될 때 부드러운 애니메이션 효과를 적용할 수 있습니다.
예를 들어, 요소의 width나 background-color 같은 특정 속성만 선택적으로 전환 효과를 적용하거나, all 값을 사용해 모든 속성에 일괄 적용할 수도 있습니다.
transition-property 기본 문법
transition-property: none | all | <속성이름>;
- none: 어떤 속성에도 전환 효과를 적용하지 않습니다.
- all: 변화하는 모든 속성에 전환 효과를 적용합니다. (기본값)
- 속성이름: width, height, background 등 전환 효과를 적용할 특정 CSS 속성을 지정합니다.
transition-property 사용 예제
아래 예제에서는 transition-property를 width로 설정하고, 전환 지속 시간(transition-duration)을 3초로 지정했습니다. 박스 위에 마우스를 올리면 너비가 부드럽게 늘어나는 것을 확인할 수 있습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 150px;
background: blue;
transition-property: width;
transition-duration: 3s;
}
div:hover {
width: 250px;
}
</style>
</head>
<body>
<h1>Heading One</h1>
<p>아래 박스 위에 마우스를 올리면 너비가 변경됩니다.</p>
<div></div>
</body>
</html>코드 설명
transition-property: width;– 너비(width) 속성에만 전환 효과를 적용합니다.transition-duration: 3s;– 전환 효과가 3초에 걸쳐 천천히 진행되도록 설정합니다.div:hover { width: 250px; }– 마우스를 올리면 박스의 너비가 150px에서 250px로 부드럽게 확장됩니다.
여러 속성에 전환 효과 적용하기
쉼표(,)로 구분하여 여러 속성에 동시에 전환 효과를 적용할 수도 있습니다.
div {
transition-property: width, background;
transition-duration: 2s, 1s;
}위 코드처럼 각 속성마다 서로 다른 지속 시간을 지정하면 더욱 세밀한 애니메이션 연출이 가능합니다.
마무리
transition-property는 CSS 애니메이션의 핵심 요소 중 하나입니다. 전환 효과를 적용할 속성을 정확히 지정하면 불필요한 성능 낭비를 줄이고, 의도한 대로 깔끔한 인터랙션을 구현할 수 있습니다. transition-duration, transition-timing-function, transition-delay와 함께 사용하면 더욱 풍부한 효과를 만들 수 있습니다.