tailwindcss 모션

✨ tailwindcss-motion β ✨

tailwindcss-motion은 RomboHQ에서 만든 Tailwind CSS 플러그인입니다. 간단한 구문을 갖춘 간단하면서도 강력한 애니메이션 라이브러리입니다.

움직임 없이, 소란 없이.

⚒️ 설치

1. npm 패키지 설치

npm i -D tailwindcss-motion

2. tailwind.config.js에 추가하세요.

 // tailwind.config.js

export default {
     content : [ ... ] ,
     theme : {
        extend : { ... } ,
     } ,
     plugins : [ require ( 'tailwindcss-motion' ) ] ,
} ;

또는 ESM을 사용하려면:

 import tailwindcssMotion from "tailwindcss-motion" ;

/** @type {import('tailwindcss').Config} */
export default {
     content : [ ... ] ,
     theme : {
          extend : { } ,
     } ,
     plugins : [ tailwindcssMotion ] ,
} ; 

어떻게 작동하나요?

Tailwind 프로젝트의 모든 요소에 애니메이션을 적용할 수 있는 간단한 구문을 제공합니다. 사용자 정의 키프레임을 정의하는 대신 모든 차원에 인라인으로 애니메이션을 적용할 수 있는 유틸리티 클래스를 제공합니다.

예를 들어 슬라이드 및 페이드 효과의 경우 간단히 motion-translate-x-in-25 motion-opacity-in-0 필요하거나 motion-preset-fade 와 함께 사전 설정 중 하나를 사용할 수 있습니다.

모션 프리셋

구성 요소에 쉽게 애니메이션을 적용할 수 있는 사전 설정 모음을 제공합니다.

• 페이드 : motion-preset-fade
• 슬라이드 :
  • 오른쪽: motion-preset-slide-right
  • 왼쪽 : motion-preset-slide-left
  • 위: motion-preset-slide-up
  • 아래: motion-preset-slide-down
• 초점 : motion-preset-focus
• 흐림 :
  • 오른쪽: motion-preset-blur-right
  • 왼쪽: motion-preset-blur-left
  • 위: motion-preset-blur-up
  • 아래: motion-preset-blur-down
• 바운스 : motion-preset-bounce
• 확장 : motion-preset-expand
• 수축 : motion-preset-shrink
• 팝 : motion-preset-pop
• 압축 : motion-preset-compress
• 흔들기 : motion-preset-shake
• 흔들기 : motion-preset-wiggle
• 색종이 조각 : motion-preset-confetti
• 타자기 : motion-preset-typewriter-[number of characters]
• 플로모지 : motion-preset-flomoji

사전 설정 사용자 정의

기본 애니메이션 및 수정자 클래스를 사용하여 사전 설정을 추가로 사용자 정의할 수 있습니다.

예를 들어:

• motion-preset-fade 에 지연을 추가합니다.

">

 < div class =" motion-preset-fade motion-delay-500 " >  div >