tailwindcss motion

✨ 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 >

• motion-preset-slide-right 의 지속 시간을 조정합니다.

 < div class =" motion-preset-slide-right motion-duration-2000 " > </ div >

• motion-preset-bounce 의 높이를 늘립니다.

 < div class =" motion-preset-bounce -motion-translate-y-in-150 " > </ div > 

기본 애니메이션

사전 설정에서 Appart를 사용하면 다음 기본 클래스를 결합하여 나만의 사용자 정의 애니메이션을 만들 수 있습니다.

• 페이드 인 : motion-opacity-in-0
• 슬라이드 인 :
  • 아래에서: motion-translate-y-in-100
  • 위에서: -motion-translate-y-in-100
• 축소 : motion-scale-in-75
• 회전 방향 :
  • 180도에서: motion-rotate-in-180
  • -90도부터: -motion-rotate-in-90
• 블러 인 : motion-blur-in-sm
• 그레이스케일 입력 : motion-grayscale-in
• 배경색 변경 : motion-bg-in-red-500
• 텍스트 색상 변경 : motion-text-in-blue-500

애니메이션 결합

단일 요소에 여러 애니메이션을 결합할 수 있습니다.

 < div
  class =" motion-scale-in-75 motion-translate-y-in-100 motion-rotate-in-90 "
> </ div >

종료 애니메이션

종료 애니메이션의 경우 클래스 이름에서 in out 으로 바꾸면 됩니다.

수정자

모든 애니메이션의 지속 시간, 지연 및 타이밍 기능을 사용자 정의할 수 있습니다.

• 지속시간 : motion-duration-500
• 지연 : motion-delay-500
• 타이밍 기능 : motion-timing-spring-bouncy

예를 들어:

 < div
  class =" motion-duration-2000 motion-rotate-in-180 motion-opacity-in-0 "
> </ div >

이는 회전 및 불투명도 애니메이션 모두에 2000ms의 지속 시간을 적용합니다.

각 속성에 대한 수정자

슬래시 / 사용하여 특정 속성에 수정자를 적용할 수 있습니다.

예를 들어:

 < div
  class =" motion-delay-500/rotate motion-rotate-in-180 motion-opacity-in-0 "
> </ div >

여기서 500ms의 지연은 불투명도가 아닌 회전 에만 적용됩니다.

용이함 기능

플러그인에는 사용자 정의 타이밍 기능이 포함되어 있습니다.

몇 가지 예는 다음과 같습니다:

• motion-ease-spring-smooth
• motion-ease-spring-snappy
• motion-ease-spring-bouncy
• motion-ease-spring-bounciest
• motion-ease-bounce
• motion-ease-bounce
• motion-ease-in-quart

예

랜딩 페이지 - https://play.tailwindcss.com/uAuVF8F1vC

채팅 대화 - https://play.tailwindcss.com/gjGqEKswjQ

배터리 부족 동적 섬 - https://play.tailwindcss.com/tvYFbHtNNQ

Apple 색상 견본 - https://play.tailwindcss.com/cvQ3Nk3v8j

롬보가 뭐예요?

Rombo는 회사가 아름다운 대화형 인터페이스를 구축하는 데 도움이 되는 도구를 구축하는 초기 단계의 회사입니다. 우리는 엔지니어, 디자이너 및 창의적인 마케팅 담당자가 Tailwind, Figma, Webflow, Shopify 등과 같은 일반적인 워크플로 내에서 기본적으로 애니메이션을 적용할 수 있는 툴킷으로 시작하고 있습니다! 당사 사이트(https://rombo.co)에서 업데이트를 받으려면 등록하세요.