트랜지션 효과

강의 목표

Tailwind CSS에서 제공하는 Transition 유틸리티를 사용하여 요소가 상태 변화 시 부드러운 애니메이션을 구현하는 방법을 배웁니다.
전환 속성, 지속 시간, 전환 속도, 지연 시간을 Tailwind의 유틸리티 클래스를 사용해 제어하는 방법을 실습을 통해 익힙니다.
중요: 이 내용은 외울 필요가 없습니다. 이러한 유틸리티가 있다는 것을 알고, 현업에서 필요한 순간에 공식 문서를 참고해 사용하면 됩니다.

Transition 효과

Transition 기본 개념

Transition은 CSS에서 요소가 상태(값)를 변경할 때, 그 변화를 일정 시간 동안 부드럽게 처리하는 애니메이션입니다. Tailwind CSS는 이러한 전환 효과를 간단하게 구현할 수 있는 유틸리티 클래스를 제공합니다.

예: 버튼이 hover 상태로 변경될 때 배경색이 즉시 바뀌는 대신, 서서히 바뀌도록 처리하는 방식입니다.

Tailwind CSS에서 Transition 사용법

Tailwind에서는 간단한 유틸리티 클래스를 통해 Transition 효과를 적용할 수 있습니다.

기본 사용법

<body class="min-h-screen flex flex-col gap-y-4 items-center justify-center">
  <!-- Transition 미적용 -->
  <button
    class="text-5xl bg-blue-500 hover:bg-blue-900 text-white font-bold py-2 px-4 rounded"
  >
    Hover me
  </button>
  <!-- Transition 적용 -->
  <button
    class="text-5xl bg-blue-500 hover:bg-blue-900 text-white font-bold py-2 px-4 rounded transition duration-500"
  >
    Hover me
  </button>
</body>

설명

transition 클래스는 색상, 배경, 보더 등 여러 속성에 전환 효과 적용.
duration-500은 전환 시간을 500ms로 설정합니다.
hover:bg-blue-900은 마우스를 올렸을 때 배경색을 blue-900로 변경합니다.

전환 속성 지정 (transition-property)

transition-all, transition-colors, transition-opacity 등의 클래스를 사용하여 특정 속성만 전환되도록 할 수 있습니다.