tailwindcss, 애니메이션 Class 만들기

tailwind.config.js 에서 정의할 수 있다.

module.exports = {
  theme: {
    extend: {
      keyframes: {
        'slide-up': {
          '0%': { transform: 'translateY(100%)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
      },
      animation: {
        'slide-up': 'slide-up 0.5s ease-out forwards',
      },
    },
  },
  plugins: [],
};

keyframes: slide-up 이라는 이름으로 새로운 애니메이션을 정의하였다.

해당 slide-up 애니메이션은 단순하게 Y의 100% 지점에서 0으로 돌아오며 opacity가 0(안보임)에서 1로 변화하는 애니메이션이다.

 

animation: slide-up

실제로 애니메이션 class를 정의하는 위치.

기존의 정의한 키프레임을 가져와 어떻게 동작할 것인지 정의할 수 있다.

 

- slide-up: 정의한 키프레임 애니메이션의 이름.
- 0.5s: 애니메이션의 지속 시간.
- ease-out: 애니메이션의 타이밍 함수.
- forwards: 애니메이션이 끝난 후 마지막 상태를 유지.

 

이후 클래스에 animate-slide-up 추가하여 애니메이션을 적용시킬 수 있다.