테일윈드(TailwindCSS)에서 애니메이션 추가하기

 

박스-쉐도우 애니메이션은 디자인에 시각적인 재미를 더하는 훌륭한 방법입니다. 이번 포스트에서는 TailwindCSS를 사용하여 확산 반경(박스-쉐도우의 네 번째 값)이 동적으로 증가하고 감소하는 **맥박 효과(Pulsating Effect)**를 만드는 방법을 알아보겠습니다.

 

목표

 

아래의 애니메이션을 구현하는 것이 목표입니다:

 

box-shadow: 0 0 2px 3px #ffcc0199;

 

확산 반경(박스-쉐도우의 네 번째 값)이 시간이 지나면서 확장되었다가 다시 줄어드는 맥박 효과를 만들 것입니다.

 

1단계: TailwindCSS에 커스텀 애니메이션 추가

 

이 효과를 구현하려면 tailwind.config.js 파일에 커스텀 애니메이션을 정의해야 합니다.

 

Tailwind 설정 업데이트

 

theme.extend 섹션에 다음 설정을 추가하세요:

 

module.exports = {
  theme: {
    extend: {
      keyframes: {
        pulseSpread: {
          '0%': { boxShadow: '0 0 2px 3px #ffcc0199' },
          '50%': { boxShadow: '0 0 2px 10px #ffcc0199' },
          '100%': { boxShadow: '0 0 2px 3px #ffcc0199' },
        },
      },
      animation: {
        pulseSpread: 'pulseSpread 1s ease-in-out infinite',
      },
    },
  },
};

 

무슨 일이 일어나고 있나요?

 

• Keyframes (pulseSpread):

• 0%: 애니메이션은 box-shadow: 0 0 2px 3px으로 시작합니다.

• 50%: 중간에는 확산 반경이 10px까지 확장됩니다.

• 100%: 확산 반경이 다시 원래 크기인 3px으로 돌아옵니다.

• Animation (pulseSpread):

• 애니메이션 이름은 pulseSpread이며, 1초 동안 실행되고 ease-in-out 타이밍 함수로 동작하며 무한히 반복됩니다.

 

2단계: 애니메이션 적용하기

 

애니메이션이 정의되었으니 HTML에서 animate-pulseSpread 클래스를 사용해 보세요.

 

사용 예시:

 

<div class="w-32 h-32 bg-blue-500 rounded-lg animate-pulseSpread"></div>

 

무슨 일이 일어나나요?

 

• animate-pulseSpread 클래스가 요소에 박스-쉐도우 애니메이션을 적용합니다.

• 요소는 부드럽게 확산 반경이 커졌다가 줄어드는 맥박 효과를 표시합니다.

 

3단계: 애니메이션 커스터마이징

 

1. 속도 조정

 

애니메이션의 속도를 조정하려면 1s 지속 시간을 변경하세요:

 

animation: {
  pulseSpread: 'pulseSpread 2s ease-in-out infinite', // 더 느린 속도
},

 

2. 확산 반경 변경

 

더 극적인 효과를 위해 확산 값을 변경하세요:

 

keyframes: {
  pulseSpread: {
    '0%': { boxShadow: '0 0 2px 5px #ffcc0199' },
    '50%': { boxShadow: '0 0 2px 15px #ffcc0199' },
    '100%': { boxShadow: '0 0 2px 5px #ffcc0199' },
  },
},

 

3. 호버 상태 추가

 

애니메이션이 호버 시에만 실행되도록 하려면 Tailwind의 hover 변형을 사용하세요:

 

<div class="w-32 h-32 bg-blue-500 rounded-lg hover:animate-pulseSpread"></div>

 

4단계: 결과물

 

최종 결과는 부드럽게 박스-쉐도우가 확산되고 줄어드는 효과로, TailwindCSS 프로젝트에서 완벽히 실행됩니다.

 

TailwindCSS 애니메이션을 사용하는 이유

 

1. 사용 용이성: 추가 CSS 파일 없이 Tailwind 설정에서 바로 애니메이션을 정의할 수 있습니다.

2. 일관성: Tailwind의 유틸리티 프레임워크 내에서 애니메이션을 통합하여 디자인 시스템의 일관성을 유지합니다.

3. 커스터마이징: Tailwind의 extend 기능으로 무한한 애니메이션 가능성을 만들 수 있습니다.

 

결론

 

TailwindCSS에서 box-shadow 애니메이션을 구현하면 간단하면서도 매력적인 요소를 쉽게 만들 수 있습니다.

Tailwind의 유틸리티 클래스와 extend 기능을 활용하면 깊이감 있고 상호작용적인 디자인을 구현할 수 있습니다.