[CSS] Tailwindcss로 transition, animation 적용하기

1. Transition

위 이미지의 tooltip, 즉 까만창이 파란색 버튼을 누르면 보였다 사라졌다 하게 만들고 싶었다. 이를 Tailwindcss로 구현하려면 어떻게 하면 될까? 이때는 `trasition`과 `duration`으로 위 효과를 나타내는 방법을 정리해보려고 한다.

 

위 컴포넌트 내용은 아래와 같다. `isVisible`에 따라 투명도를 조절하려고 한다.

const InfoTag = ({ isVisible }: { isVisible: boolean }) => {
  return (
    <div>
      <p>도로명 주소를 입력해 주세요.</p>
      <p>
        ex. 서울특별시 중구 <span className="text-primary-400">중림로 37 (중림동)</span>
      </p>
    </div>
  );
};

 

그러면 transition은 내용의 가장 상위 컴포넌트에 적용해 하위 컴포넌트에 모두 적용될 수 있게 해야 한다. Tailwindcss의 공식 문서를 확인하면 `transition`에 관한 여러 class가 있지만 편의상 `transition-all`을 사용했다.

 

기본 배경색을 `bg-black`, 기본 폰트색을 'text-white`라고 하자. 불투명도 `opacity`를 조절하고 싶으므로 `opacity-0`과 `opacity-100`만 바꿔줄 것이다. 그러면 className을 아래와 같이 작성하면 된다.

const InfoTag = ({ isVisible }: { isVisible: boolean }) => {
  return (
    <div className={`bg-black text-white transition-all ${isVisible ? 'opacity-100' : 'opacity-0}`}>
      <p>도로명 주소를 입력해 주세요.</p>
      <p>
        ex. 서울특별시 중구 <span className="text-primary-400">중림로 37 (중림동)</span>
      </p>
    </div>
  );
};

 

`transition`을 적용하면 기본적으로 `duration`이  150ms 정도로 적용되어 있다. 이를 변경하려면 `duration`을 사용하면 된다. 200ms로 조절하려면 `duration-200`을 사용하면 되고, 커스텀으로 시간을 조절하려면 `duration-[2000ms]`와 같이 작성하면 된다.

 

2. Animation

기타 애니메이션을 적용하려면 거의 기본 css에서 하는 것과 같이 하면 된다. `wiggle`이라는 애니메이션을 만들려면 아래와 같이 `tailwind.confis.ts`에 작성하면 된다.

const config: Config = {
  ...
  theme: {
    extend: {
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        }
      },
      animation: {
        wiggle: 'wiggle 1s ease-in-out infinite',
      }
    }
  },
  plugins: [require("tailwindcss-animate")]
};

 

위와 같이 작성했으면 wiggle이 필요한 컴포넌트에 `animation-wiggle`을 추가해주면 된다. 혹은 animation을 위에 정의한 keyframe을 따르지만 조금 다르게 하고 싶다면 `animation-[wiggle_2s_ease-in-out_infinite]`처럼 작성하면 된다.