tailwindcss animate

tailwindcss-animate

아름다운 애니메이션을 만들기위한 Tailwind CSS 플러그인.

 <!-- Add an animated fade and zoom entrance -->
< div class =" animate-in fade-in zoom-in " > ... </ div >

<!-- Add an animated slide to top-left exit -->
< div class =" animate-out slide-out-to-top slide-out-to-left " > ... </ div >

<!-- Control animation duration -->
< div class =" ... duration-300 " > ... </ div >

<!-- Control animation delay -->
< div class =" ... delay-150 " > ... </ div >

<!-- And so much more! --> 

설치

NPM에서 플러그인을 설치하십시오.

npm install -D tailwindcss-animate

그런 다음 플러그인을 tailwind.config.js 파일에 추가하십시오.

 // @filename tailwind.config.js
module . exports = {
	theme : {
		// ...
	} ,
	plugins : [
		require ( "tailwindcss-animate" ) ,
		// ...
	] ,
} 

선적 서류 비치

• 기본 사용
  • 애니메이션 지연 변경
  • 애니메이션 방향 변경
  • 애니메이션 지속 시간 변경
  • 애니메이션 채우기 모드 변경
  • 애니메이션 반복 카운트 변경
  • 애니메이션 플레이 상태 변경
  • 애니메이션 타이밍 기능 변경
  • 감소 된 모션을 선호합니다
• 애니메이션을 입력하고 종료하십시오
  • 입력 애니메이션 추가
  • 종료 애니메이션 추가
  • 불투명도 시작 애니메이션 변경
  • 에 엔터리 애니메이션 시작 회전
  • 애니메이션 시작 스케일 변경
  • 애니메이션 시작 변경 번역
  • 종료 애니메이션 변경 불투명도
  • 출구 변경 애니메이션 종료 회전
  • 종료 애니메이션 종료 규모 변경
  • 종료 애니메이션 결말 변경

기본 사용

애니메이션 지연 변경

delay-{amount} 유틸리티를 사용하여 요소의 animation-delay 제어하십시오.

 < button class =" animate-bounce delay-150 duration-300 ... " > Button A </ button >
< button class =" animate-bounce delay-300 duration-300 ... " > Button B </ button >
< button class =" animate-bounce delay-700 duration-300 ... " > Button C </ button >

애니메이션 지연 문서에서 자세히 알아보십시오.

애니메이션 방향 변경

direction-{keyword} 유틸리티를 사용하여 요소의 animation-delay 제어하십시오.

 < button class =" animate-bounce direction-normal ... " > Button A </ button >
< button class =" animate-bounce direction-reverse ... " > Button B </ button >
< button class =" animate-bounce direction-alternate ... " > Button C </ button >
< button class =" animate-bounce direction-alternate-reverse ... " > Button C </ button >

애니메이션 방향 문서에서 자세히 알아보십시오.

애니메이션 지속 시간 변경

duration-{amount} 유틸리티를 사용하여 요소의 animation-duration 제어하십시오.

 < button class =" animate-bounce duration-150 ... " > Button A </ button >
< button class =" animate-bounce duration-300 ... " > Button B </ button >
< button class =" animate-bounce duration-700 ... " > Button C </ button >

애니메이션 지속 시간 문서에서 자세히 알아보십시오.

애니메이션 채우기 모드 변경

fill-mode-{keyword} 유틸리티를 사용하여 요소의 animation-fill-mode 제어하십시오.

 < button class =" animate-bounce fill-mode-none ... " > Button A </ button >
< button class =" animate-bounce fill-mode-forwards ... " > Button B </ button >
< button class =" animate-bounce fill-mode-backwards ... " > Button C </ button >
< button class =" animate-bounce fill-mode-both ... " > Button C </ button >

애니메이션 필드 모드 문서에서 자세히 알아보십시오.

애니메이션 반복 카운트 변경

repeat-{amount} 유틸리티를 사용하여 요소의 animation-iteration-count 제어하십시오.

 < button class =" animate-bounce repeat-0 ... " > Button A </ button >
< button class =" animate-bounce repeat-1 ... " > Button B </ button >
< button class =" animate-bounce repeat-infinite ... " > Button C </ button >

애니메이션 반복 수 문서에서 자세히 알아보십시오.

애니메이션 플레이 상태 변경

running 및 paused 유틸리티를 사용하여 요소의 animation-play-state 제어하십시오.

 < button class =" animate-bounce running ... " > Button B </ button >
< button class =" animate-bounce paused ... " > Button A </ button >

애니메이션 플레이 상태 문서에서 자세히 알아보십시오.

애니메이션 타이밍 기능 변경

ease-{keyword} 유틸리티를 사용하여 요소의 animation-timing-function 제어하십시오.

 < button class =" animate-bounce ease-linear ... " > Button A </ button >
< button class =" animate-bounce ease-in ... " > Button B </ button >
< button class =" animate-bounce ease-out ... " > Button C </ button >
< button class =" animate-bounce ease-in-out ... " > Button C </ button >

애니메이션 타이밍 기능 문서에서 자세히 알아보십시오.

감소 된 모션을 선호합니다

사용자가 모션 감소를 선호하도록 지정 한 상황의 경우 motion-safe 및 motion-reduce 변형을 사용하여 조건부에 애니메이션 및 전환을 적용 할 수 있습니다.

 < button class =" motion-safe:animate-bounce ... " > Button B </ button >

애니메이션을 입력하고 종료하십시오

입력 애니메이션 추가

요소에 입력 애니메이션을 제공하려면 animate-in 를 사용하여 일부 fade-in , spin-in , zoom-in 및 slide-in-from 유틸리티와 함께 ​​사용하십시오.

 < button class =" animate-in fade-in ... " > Button A </ button >
< button class =" animate-in spin-in ... " > Button B </ button >
< button class =" animate-in zoom-in ... " > Button C </ button >
< button class =" animate-in slide-in-from-top ... " > Button D </ button >
< button class =" animate-in slide-in-from-left ... " > Button E </ button >

애니메이션 입력 문서에서 자세히 알아보십시오.

종료 애니메이션 추가

출구 애니메이션을 제공하려면 animate-out 유틸리티를 사용하여 fade-out , spin-out , zoom-out 및 slide-out-from 유틸리티와 함께 ​​사용하십시오.

 < button class =" animate-out fade-out ... " > Button A </ button >
< button class =" animate-out spin-out ... " > Button B </ button >
< button class =" animate-out zoom-out ... " > Button C </ button >
< button class =" animate-out slide-out-from-top ... " > Button D </ button >
< button class =" animate-out slide-out-from-left ... " > Button E </ button >

출구 애니메이션 문서에서 자세히 알아보십시오.

불투명도 시작 애니메이션 변경

fade-in-{amount} 유틸리티를 사용하여 애니메이션의 시작 불투명도를 설정하십시오.

 < button class =" animate-in fade-in ... " > Button A </ button >
< button class =" animate-in fade-in-25 ... " > Button B </ button >
< button class =" animate-in fade-in-50 ... " > Button C </ button >
< button class =" animate-in fade-in-75 ... " > Button C </ button >

애니메이션 불투명도 문서에서 자세히 알아보십시오.

에 엔터리 애니메이션 시작 회전

spin-in-{amount} 유틸리티를 사용하여 애니메이션의 시작 회전을 설정하십시오.

 < button class =" animate-in spin-in-1 ... " > Button A </ button >
< button class =" animate-in spin-in-6 ... " > Button B </ button >
< button class =" animate-in spin-in-75 ... " > Button C </ button >
< button class =" animate-in spin-in-90 ... " > Button C </ button >

애니메이션 입력에서 자세히 알아보십시오.

애니메이션 시작 스케일 변경

zoom-in-{amount} 유틸리티를 사용하여 애니메이션의 시작 스케일을 설정하십시오.

 < button class =" animate-in zoom-in ... " > Button A </ button >
< button class =" animate-in zoom-in-50 ... " > Button B </ button >
< button class =" animate-in zoom-in-75 ... " > Button C </ button >
< button class =" animate-in zoom-in-95 ... " > Button C </ button >

애니메이션 스케일 입력 문서에서 자세히 알아보십시오.

애니메이션 시작 변경 번역

slide-in-from-{direction}-{amount} 유틸리티를 사용하여 애니메이션의 시작 번역을 설정하십시오.

 < button class =" animate-in slide-in-from-top ... " > Button A </ button >
< button class =" animate-in slide-in-from-bottom-48 ... " > Button B </ button >
< button class =" animate-in slide-in-from-left-72 ... " > Button C </ button >
< button class =" animate-in slide-in-from-right-96 ... " > Button C </ button >

Enter Animation Translate Documentation에서 자세히 알아보십시오.

종료 애니메이션 변경 불투명도

fade-out-{amount} 유틸리티를 사용하여 애니메이션의 결말 불투명도를 설정하십시오.

 < button class =" animate-out fade-out ... " > Button A </ button >
< button class =" animate-out fade-out-25 ... " > Button B </ button >
< button class =" animate-out fade-out-50 ... " > Button C </ button >
< button class =" animate-out fade-out-75 ... " > Button C </ button >

출구 애니메이션 불투명도 문서에서 자세히 알아보십시오.

출구 변경 애니메이션 종료 회전

spin-out-{amount} 유틸리티를 사용하여 애니메이션의 결말 회전을 설정하십시오.

 < button class =" animate-out spin-out-1 ... " > Button A </ button >
< button class =" animate-out spin-out-6 ... " > Button B </ button >
< button class =" animate-out spin-out-75 ... " > Button C </ button >
< button class =" animate-out spin-out-90 ... " > Button C </ button >

출구 애니메이션에서 자세히 알아보십시오.

종료 애니메이션 종료 규모 변경

zoom-out-{amount} 유틸리티를 사용하여 애니메이션의 결말 규모를 설정하십시오.

 < button class =" animate-out zoom-out ... " > Button A </ button >
< button class =" animate-out zoom-out-50 ... " > Button B </ button >
< button class =" animate-out zoom-out-75 ... " > Button C </ button >
< button class =" animate-out zoom-out-95 ... " > Button C </ button >

출구 애니메이션 스케일 문서에서 자세히 알아보십시오.

종료 애니메이션 결말 변경

slide-out-to-{direction}-{amount} 유틸리티를 사용하여 애니메이션의 엔딩 번역을 설정하십시오.

 < button class =" animate-out slide-out-to-top ... " > Button A </ button >
< button class =" animate-out slide-out-to-bottom-48 ... " > Button B </ button >
< button class =" animate-out slide-out-to-left-72 ... " > Button C </ button >
< button class =" animate-out slide-out-to-right-96 ... " > Button C </ button >

출구 애니메이션 번역 문서에서 자세히 알아보십시오.