Logo

CSS 트랜지션(transition)

CSS 트랜지션(transition)은 어떤 엘리먼트에 스타일의 변화가 일정 시간에 걸쳐서 부드럽게 나타나도록 할 때 사용합니다.

기본 사용법

CSS에서 트랜지션과 관련된 속성은 다음과 같은데 처음에는 좀 복잡하게 느껴질 수도 있습니다.

  • transition: 아래 4가지 속성을 한 번에 지정 가능
  • transition-property: 트랜지션을 적용할 속성 이름
  • transition-duration: 스타일 변화가 일어나는 기간 (s: 초, ms: 밀리초)
  • transition-timing-function: 스타일 변화을 일으키는 방식 (ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier, …)
  • transition-delay: 스타일 변화가 시작되기 전까지 대기 시간

대부분의 경우, 사용하기가 간편하고 유연한 transition 속성이 많이 쓰이는데요. 다음과 같은 구조로 속성값을 선택적으로 지정하면 됩니다.

div {
  transition: <속성> <기간> <방식> <지연>;
}

기본값은 all 0s ease 0s이고, 생략한 부분은 기본값이 적용됩니다.

예제 페이지 작성

지금부터 예제를 통해 CSS 트랜지션을 어떻게 사용하는지 알아보겠습니다. 먼저 HTML로 아주 간단한 목록 페이지에 대한 마크업을 합니다.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

그리고 CSS로 <ul>과 <li> 엘리먼트에 대한 간단한 스타일을 적용합니다.

li {
  margin: 0.5rem;
  padding: 0.5rem 1rem;

  border: 2px solid #33272a;
  border-radius: 0.5rem;

  color: #33272a;
  background: #faeee7;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

정적인 웹페이지가 완성되었습니다. 아무런 시각적인 효과가 없어서 아직까지는 심심하게 느껴집니다.

마우스 올렸을 때 스타일 변경

각 <li> 엘리먼트에 마우스를 올리면, 배경색이 변하고, 우측으로 약간씩 이동하도록 스타일을 적용해보겠습니다.

li:hover {
  background: #ff8ba7;
  transform: translateX(2rem);
}

이전 화면보다는 덜 심심하지만, 시각적인 변화가 너무 투박한 느낌이 있습니다.

CSS 트랜지션 적용 1

지금부터 CSS 트랜지션을 적용하여 목록 페이지의 시각적인 변화가 좀 더 부드럽게 일어나도록 해보겠습니다. 일반적으로 다음과 같이 스타일 변화가 일어나는 기간만 설정해줘도 큰 효과를 느낄 수가 있습니다.

li {
  /* 생략 */
  transition: 2s;
}

이전 목록보다 훨씬 매끈하게 시각적인 변화가 일어나는 것을 볼 수 있습니다.

CSS 트랜지션 적용 2

각 속성별로 좀 더 세부적으로 CSS 트랜지션을 적용할 수도 있습니다.

li {
  /* 생략 */
  transition: background 3s ease-in, transform 1s linear;
}

이전 목록 대비 배경색은 좀 더 시간을 두고 은은하게 비뀌는 반면에, 자리 이동은 직선적으로 빠르게 일어나는 것을 볼 수 있습니다.

마치면서

이상으로 간단한 예제를 통해 CSS 트랜지션을 적용하는 방법에 대해서 살펴보았습니다. CSS 트랜지션에 대한 좀 더 자세한 내용은 아래 MDN 문서를 참고바랍니다.

Oct 10, 2020
CSS

This work is licensed under CC BY 4.0

messageCircle