CSS 트랜지션, 웹을 살아 숨 쉬게 합니다

웹페이지에서 버튼에 마우스를 올렸을 때 색깔이 갑자기 팍! 변하는 것보다, 스르륵 부드럽게 변하면 훨씬 더 세련되고 사용자 경험도 좋겠죠? 이럴 때 쓰는 게 바로 **트랜지션(Transition)**이에요. 특정 CSS 속성값이 바뀔 때, 그 변화를 부드럽게 이어주는 역할을 한답니다.

자바스크립트 없이도 오직 CSS만으로 애니메이션 효과를 줄 수 있어서 정말 편리하고 강력한 기능이에요.

트랜지션, 딱 네 가지 속성만 기억하면 끝!
트랜지션을 사용하려면 기본적으로 네 가지 속성을 알아야 해요. 이 네 가지를 한 줄로 쓰는 경우가 많으니, 먼저 각각의 의미를 알아볼까요?

1. transition-property: 어떤 속성을 바꿀까?
이게 뭐냐면요? 부드럽게 변화시킬 CSS 속성을 지정하는 거예요. 예를 들어, background-color (배경색), width (너비), opacity (투명도) 등 어떤 속성값이 변할 때 트랜지션을 적용할지 정하는 거죠. 모든 속성에 적용하고 싶다면 all이라고 쓰면 돼요.

2. transition-duration: 얼마나 오래 걸릴까?
이게 뭐냐면요? 변화가 시작돼서 끝날 때까지 얼마나 시간이 걸릴지를 정해요. 초(s) 또는 밀리초(ms) 단위로 지정합니다. 1s는 1초, 500ms는 0.5초를 의미해요.

3. transition-timing-function: 어떤 속도로 변할까?
이게 뭐냐면요? 변화하는 속도 곡선을 지정하는 거예요. 처음부터 끝까지 일정한 속도로 변할지, 아니면 처음엔 느리다가 빨라질지 등 속도의 흐름을 정합니다.

자주 쓰는 값:

ease (기본값): 느리게 시작 → 빨라짐 → 느리게 끝남 (가장 자연스러움)
linear: 처음부터 끝까지 일정한 속도
4. transition-delay: 언제 시작할까?
이게 뭐냐면요? 트랜지션이 얼마나 지연되었다가 시작할지를 정해요. 마우스를 올리자마자 변하는 게 아니라, 0.5초 뒤에 변하게 하고 싶을 때 사용하죠. 초(s) 또는 밀리초(ms) 단위로 지정합니다.

한 줄로 깔끔하게 쓰는 법! (transition 단축 속성)
보통은 위 네 가지를 transition이라는 하나의 속성으로 한 줄에 쭉 써요. 순서는 크게 중요하지 않지만, duration은 항상 delay보다 먼저 와야 브라우저가 헷갈리지 않아요.

권장되는 순서: property duration timing-function delay

CSS

.box {
/* 배경색이 0.5초 동안 ease-in-out 속도로 0.1초 후에 변하기 시작 */
transition: background-color 0.5s ease-in-out 0.1s;
}
실전 예시: 마우스를 올리면 색깔과 크기가 변하는 박스!
HTML 코드:

HTML

<div class="my-button">마우스를 올려보세요!</div>
CSS 코드:

CSS

.my-button {
width: 150px;
height: 70px;
background-color: #3498db; /* 원래 파란색 */
color: white;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
cursor: pointer; /* 마우스 올리면 손가락 모양으로 */

/* 여기! 트랜지션 속성을 줍니다. */
/* 모든 속성이 0.3초 동안 ease-in-out 속도로 변할 거야! */
transition: all 0.3s ease-in-out;
}

/* 마우스를 올렸을 때 (hover) 변화할 속성 */
.my-button:hover {
background-color: #e74c3c; /* 빨간색으로 변하고 */
width: 180px; /* 너비가 늘어나고 */
font-size: 20px; /* 글자 크기도 커져! */
}
이 코드를 실행하고 my-button에 마우스를 올려보면, 배경색, 너비, 글자 크기가 갑자기 팍 바뀌지 않고 0.3초 동안 부드럽게 스르륵 변하는 걸 볼 수 있을 거예요.