CSS 트랜지션(Transition) 완벽 가이드: 부드러운 애니메이션 효과 구현하기

웹 페이지를 디자인하다 보면 특정 요소에 전환 효과(트랜지션)를 추가하고 싶을 때가 있습니다. 트랜지션은 특정 조건이 충족될 때 발생하는데, 예를 들어 사용자가 버튼 위에 마우스를 올렸을 때 버튼의 배경색이 바뀌도록 만들 수 있습니다.

CSS의 transition 속성과 그 하위 속성들을 활용하면 HTML 요소의 속성이 변할 때 애니메이션 효과를 만들 수 있습니다.

이 글에서는 몇 가지 예제와 함께 CSS 트랜지션의 기본 개념과 transition 속성을 활용한 애니메이션 구현 방법을 살펴보겠습니다.

CSS 트랜지션이란?

기본적으로 CSS 속성 값이 변경되면 웹 페이지는 변경 사항을 즉시 적용합니다.

예를 들어, 커서가 버튼 위에 올라왔을 때 스타일이 바뀌도록 설정했다면, 사용자가 마우스를 올리는 순간 새로운 스타일이 즉시 적용됩니다. 커서가 버튼에서 벗어나면 역시 즉시 원래 스타일로 돌아가죠.

CSS 트랜지션은 두 스타일 사이를 부드럽게 연결해 주는 기능입니다. transition 속성을 사용하면 웹 페이지가 두 스타일 간의 변화를 애니메이션으로 처리하여, 시각적으로 훨씬 세련된 스타일 변화를 연출할 수 있습니다.

CSS 트랜지션은 다음 두 가지 요소로 구성됩니다.

• 요소에 적용할 새로운 CSS 속성
• 트랜지션이 진행되는 지속 시간(duration)

트랜지션의 기본 지속 시간은 0초입니다. 따라서 지속 시간을 따로 지정하지 않으면 트랜지션이 아무런 효과 없이 즉시 적용됩니다.

CSS 트랜지션 예제

웹사이트용 버튼을 디자인한다고 가정해 봅시다. 사용자가 마우스를 올리지 않았을 때는 파란색 테두리를 가진 버튼이고, 마우스를 올리면 배경색이 흰색(기본값)에서 파란색으로 바뀌도록 하고 싶습니다.

두 상태 모두에서 버튼은 가로 100px, 세로 100px 크기를 유지하고 텍스트는 중앙 정렬되어야 합니다. 또한 두 상태 간의 전환은 2초에 걸쳐 일어나야 합니다.

이 버튼을 만드는 코드는 다음과 같습니다.

index.html

<div><p>This is a button.</p></div>

styles.css

div {
	width: 100px;
	height: 100px;
	text-align: center;
	border: solid 3px #33CCFF;
	transition: background-color 2s;
}

div:hover {
	background-color: #33CCFF;
}

코드를 살펴보면, 버튼의 크기를 100px × 100px로 지정하고 내용물을 중앙 정렬했습니다. 또한 너비 3px의 파란색 실선 테두리를 적용했습니다.

버튼 위에 마우스를 올리면 배경색이 파란색으로 바뀌고, 커서를 치우면 다시 흰색으로 돌아갑니다.

이 예제에서는 배경색 속성에 2초의 트랜지션 시간을 지정했습니다. 따라서 사용자가 버튼에 마우스를 올리면 배경색이 흰색에서 파란색으로 바뀌는 데 2초가 걸립니다. 즉, 변화가 즉각적으로 일어나지 않는 것이죠.

마찬가지로 커서가 버튼에서 벗어나면 배경색도 2초에 걸쳐 파란색에서 흰색으로 서서히 변합니다. 이렇게 커서 위치에 따라 새로운 배경색으로 부드럽게 전환되는 효과를 구현할 수 있습니다.

여기서 우리는 :hover 선택자를 사용해 마우스 오버 시 적용할 스타일을 지정했습니다. :hover 선택자에 정의된 스타일은 사용자가 해당 요소 위에 커서를 올릴 때 적용됩니다.

:hover 선택자에 대해 더 자세히 알고 싶다면 관련 가이드 문서를 참고하세요.

트랜지션 속도 곡선 (Timing Function)

transition-timing-function 속성을 사용하면 트랜지션 효과의 속도 곡선을 지정할 수 있습니다. 이 속성이 받는 주요 값들은 다음과 같습니다.

표에서 볼 수 있듯이 첫 번째 값인 "ease"가 기본값입니다. 즉, 트랜지션 스타일을 지정할 때 transition-timing-function 속성이나 값을 명시하지 않으면 자동으로 이 값이 적용됩니다.

앞선 예제 코드를 통해 transition-timing-function 속성이 어떻게 작동하는지 확인해 보겠습니다. 이전 예제에서는 "ease" 속도 곡선을 사용했기 때문에, 버튼 스타일이 느리게 시작해 빠르게 가속한 후 다시 느리게 끝나는 방식으로 변경되었습니다.

하지만 버튼이 균일한 속도로 배경색이 바뀌길 원한다면 어떻게 해야 할까요? "linear" 값을 지정하면 됩니다. 코드는 다음과 같습니다.

<div><p>This is a button.</p></div>

div {
	width: 100px;
	height: 100px;
	text-align: center;
	border: solid 3px #33CCFF;
	transition: background-color 2s linear 0.5s;
}

div:hover {
	background-color: #33CCFF;
}

스타일은 대부분 이전 예제와 동일합니다. 유일한 차이점은 ease 대신 linear 트랜지션을 지정했다는 점입니다. 이렇게 하면 트랜지션이 시작된 후 종료까지 속도가 일정하게 유지됩니다.

트랜지션 지연 (Transition Delay)

transition-delay 속성을 사용하면 트랜지션 효과의 시작을 지연시킬 수 있습니다. 값은 초 단위로 지정합니다.

예를 들어, 버튼의 배경색이 1초 후에 바뀌도록 설정하고 싶다면 다음과 같은 코드를 사용할 수 있습니다.

<div><p>This is a button.</p></div>

div {
	width: 100px;
	height: 100px;
	text-align: center;
	border: solid 3px #33CCFF;
	transition: background-color ease-in 0.5s;
	transition-delay: 1s;
}

div:hover {
	background-color: #33CCFF;
}

이 코드에서는 트랜지션 지연 시간을 1초로 지정했습니다. 따라서 사용자가 버튼 위에 마우스를 올린 지 1초가 지난 후에야 트랜지션이 시작됩니다.

여러 트랜지션 동시에 적용하기

트랜지션을 다루다 보면 하나 이상의 전환 효과를 동시에 적용하고 싶을 수 있습니다.

이 경우 여러 트랜지션을 쉼표(,)로 구분하여 나열하면 됩니다. 각 트랜지션은 지속 시간, 속도 곡선 등 일반적인 트랜지션에서 사용하는 모든 속성을 개별적으로 가질 수 있습니다.

앞선 버튼 예제를 확장해 보겠습니다. 이번에는 배경색을 파란색으로 바꾸는 것뿐만 아니라, 테두리 색상도 분홍색으로 바꿔보겠습니다. 두 효과 모두 사용자가 마우스를 올릴 때 발생해야 합니다.

div {
	width: 100px;
	height: 100px;
	text-align: center;
	border: solid 3px #33CCFF;
	transition: background-color 2s, border 2s;
}

div:hover {
	background-color: #33CCFF;
	border: solid 3px lightpink
}

버튼 위에 마우스를 올리면 배경색은 파란색으로, 테두리 색상은 연분홍색으로 바뀝니다. 이 전환은 2초에 걸쳐 완료됩니다.

참고로, 트랜지션 목록에서 각 트랜지션이 나열되는 순서는 결과에 영향을 주지 않습니다.

CSS 트랜지션: 롱핸드(Longhand) vs 숏핸드(Shorthand)

지금까지의 예제에서는 transition 속성 하나로 트랜지션을 스타일링했습니다. 이 속성은 CSS에서 트랜지션을 정의하는 네 가지 개별 하위 속성의 축약형(숏핸드)입니다. 네 가지 하위 속성은 다음과 같습니다.

• transition-property: 트랜지션 효과를 적용할 속성을 지정합니다.
• transition-duration: 트랜지션이 지속되는 시간을 나타냅니다.
• transition-timing-function: 트랜지션의 속도 곡선을 정의합니다.
• transition-delay: 트랜지션의 시작을 지연시킵니다.

예제를 통해 이 속성들이 실제로 어떻게 작동하는지 살펴보겠습니다. 가로세로 100px 크기에 파란색 테두리, 흰색(기본) 배경, 중앙 정렬된 텍스트를 가진 버튼을 만든다고 가정합시다. 사용자가 마우스를 올리면 배경색이 파란색으로 전환되어야 하고, 이 전환은 2초에 걸쳐 일어나며, 마우스를 올린 후 0.5초 뒤에 시작되어야 합니다.

이를 구현하는 코드는 다음과 같습니다.

<div><p>This is a button.</p></div>

div {
	width: 100px;
	height: 100px;
	text-align: center;
	border: solid 3px #33CCFF;
	transition-property: background-color;
	transition-duration: 2s;
	transition-timing-function: ease;
	transition-delay: 0.5s;
}

div:hover {
	background-color: #33CCFF;
}

이렇게 하면 마우스를 올리고 뗄 때 각각 파란색 배경으로 전환되고 되돌아오는 버튼이 완성됩니다.

코드에서는 네 가지 트랜지션 하위 속성(transition-property, transition-duration, transition-timing-function, transition-delay)을 각각 지정했습니다. 버튼의 높이, 너비, 텍스트 정렬, 테두리 색상은 이전 예제의 스타일을 그대로 사용했습니다.

반면, transition 숏핸드를 사용하면 네 줄에 걸쳐 작성하던 트랜지션을 한 줄로 표현할 수 있습니다. 숏핸드 문법은 다음과 같습니다.

transition: transition-property transition-duration transition-timing-function transition-delay;

여기서 나열된 값들의 순서대로 작성해야 한다는 점에 유의하세요.

숏핸드 문법을 사용해 앞선 버튼을 만드는 코드는 다음과 같습니다.

<div><p>This is a button.</p></div>

div {
	width: 100px;
	height: 100px;
	text-align: center;
	border: solid 3px #33CCFF;
	transition: background-color 2s ease 0.5s;
}

div:hover {
	background-color: #33CCFF;
}

결과는 이전 예제와 동일합니다. 유일한 차이점은 각 하위 속성을 개별 줄로 나열하는 대신 transition 숏핸드를 사용했다는 것뿐입니다.

마무리

CSS의 transition 속성은 스타일 간에 발생할 전환의 형태를 정의하는 데 사용됩니다. 이 속성은 transition-property, transition-duration, transition-timing-function, transition-delay라는 네 가지 하위 속성의 축약형이며, 각 하위 속성을 사용해 트랜지션의 세부 요소를 개별적으로 설정할 수 있습니다.

이 글에서는 예제와 함께 transition 속성과 네 가지 하위 속성을 활용해 CSS 트랜지션을 만드는 방법을 알아보았습니다. 이제 프로 웹 개발자처럼 CSS 트랜지션을 직접 만들어 볼 준비가 되었습니다!