Tailwind CSS 애니메이션 사용법, 커스터마이징

"CSS로 해결 가능하다 생각되는 것은 웬만하면 CSS로 처리하는 것이 좋다"

Tailwind CSS에선 애니메이션 중 가장 일반적이고 자주 쓰이는 것들 몇개가 내장되어 있다. 또한 내장된 애니메이션 속성을 변경할 수도 있고, 애니메이션을 추가로 만들 수도 있다.

 

먼저 내장된 애니메이션을 살펴보고 다음 방법들을 알아보자.

Spin Animation

로딩 화면에 자주 쓰이는 기본적인 회전(spin) 애니메이션이 내장되어 있다.

tailwind css spin animation

Code

animation: spin 1s linear infinite;

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Ping Animation

알림 배지에 유용하게 쓰일 수 있는 핑 애니메이션이 내장되어 있다.

tailwind css ping animation

Code

animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

Pulse Animation

콘텐츠가 로드 되기전 요소가 자연스럽게 나오도록 펄스 애니메이션을 사용할 수 있다.

 

아래와 같은 작업을 스켈레톤(skeleton) 로더라고 한다. 스켈레톤 개념을 최근에 알게 되었다. 개인적으로 이런 작업이 있고 없고가 사용자 경험에 꽤 큰 영향이 있는 것 같아서 한번 사용 해보고 싶다.

tailwind css pulse animation

Code

animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
}

Bounce Animation

요소가 위아래로 튕기도록 하는 바운스 애니메이션을 사용할 수 있다. 회사 소개 페이지나 개인 포트폴리오 사이트에 자주 쓰이는 "아래로 스크롤"과 같은 작업에 유용하다.

tailwind css bounce animation

Code

animation: bounce 1s infinite;

@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

이렇게 일반적으로 쓰이는 애니메이션들이 내장된 tailwind css의 애니메이션에 대해 알아보았다. 자주는 아니더라도 해당 애니메이션을 사용할 때마다 까먹어서 구글링을 하거나 예전에 작성한 코드들을 찾느라 고생한 적이 몇몇 있었는데, className을 추가하는 것만으로도 애니메이션을 적용할 수가 있어서 개발자 경험이 좋았다.

 

또한 hover, focus 시 애니메이션 동작, 반응형 중단점(breakpoints), 다크 모드, 모션 축소(prefers-reduced-motion) 등과 같은 미디어 쿼리를 대상으로 지정할 수도 있다.

 

그렇다면 애니메이션을 추가로 만들고 싶을 때는 어떻게 할까?

Customizing Animation

애니메이션을 추가로 만들고, 기존 내장된 애니메이션의 속성도 변경할 수가 있다. 먼저 애니메이션을 추가로 만드는 방법을 알아보자.

 

애니메이션 추가는 tailwind.config.js 파일의 theme.extend.animation에서 추가할 수 있다. 만약 spin 애니메이션이 너무 빠르게 돌아간다고 생각되면 다음과 같이 추가할 수 있다.

// 📂 tailwind.config.js

module.exports = {
  // ...
  theme: {
    extend: {
      animation: {
        'spin-slow': 'spin 3s linear infinite',
      }
    }
  }
}

또는 bounce 애니메이션이 좀 더 높게 튀면 좋겠다 생각되면 theme.keyframes에서 내장된 bounce의 속성을 변경할 수도 있다.

// 📂 tailwind.config.js

module.exports = {
  // ...
  theme: {
    keyframes: {
      bounce: {
        '0%, 100%': {
          transform: 'translateY(-55%)',
          'animation-timing-function': 'cubic-bezier(0.8,0,1,1)',
        },
        '50%': {
          transform: 'none',
          'animation-timing-function': 'cubic-bezier(0,0,0.2,1)',
        },
      },
    },
  },
};

tailwind css bounce animation - high

그럼 이번엔 손을 흔드는 것처럼 보여주는 wiggle 애니메이션을 새롭게 만들어보자. 먼저 theme.extend에서 wiggle keyframes를 추가한다.

// 📂 tailwind.config.js

module.exports = {
  // ...
  theme: {
    extend: {
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        }
      }
    }
  }
}

그리고 이제 wiggle 애니메이션을 추가해준다.

// 📂 tailwind.config.js

module.exports = {
  // ...
  theme: {
    extend: {
      animation: {
        wiggle: 'wiggle 1s ease-in-out infinite',
      }
    }
  }
}

tailwind css wiggle animation

만약 테마의 목적에 적합하지 않은 일회성 애니메이션이라면 대괄호를 사용해서 임의의 값으로 사용할 수 있다.

<div class="animate-[wiggle_1s_ease-in-out_infinite]">
  <!-- ... -->
</div>

참고

Tailwind CSS