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

次に、Pluginをtailwind.config.jsファイルに追加します。

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

ドキュメント

• 基本的な使用法
  • アニメーションの遅延の変更
  • アニメーションの方向を変える
  • アニメーション期間の変更
  • アニメーションフィルモードの変更
  • アニメーション反復カウントの変更
  • アニメーションの変化は状態を再生します
  • アニメーションタイミング関数の変更
  • 還元運動を好む
• アニメーションを入力して終了します
  • Animationsを入力します
  • 終了アニメーションを追加します
  • 不透明度を開始するアニメーションを入力する変更
  • Animationの開始回転を変更する変更
  • Animation Startingスケールの入力を変更します
  • ANIMATIONの変更を変更してください翻訳
  • EXITアニメーションの終了不透明度を変更します
  • Exit Animation Ending Rotationを変更します
  • Exit Animation Endingスケールを変更します
  • Exitアニメーションエンディングの変更翻訳

基本的な使用法

アニメーションの遅延の変更

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 >

詳細については、Animation Directionドキュメントをご覧ください。

アニメーション期間の変更

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 >

詳細については、Animation Iteration countドキュメントをご覧ください。

アニメーションの変化は状態を再生します

runningおよびpausedユーティリティを使用して、要素のanimation-play-stateを制御します。

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

詳細については、Animation Play Stateドキュメントをご覧ください。

アニメーションタイミング関数の変更

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 >

アニメーションを入力して終了します

Animationsを入力します

要素を入力するには、Animation、 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 >

Enter Animationドキュメントで詳細をご覧ください。

終了アニメーションを追加します

ElementにExitアニメーションを与えるには、 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 >

Exit Animationドキュメントで詳細をご覧ください。

不透明度を開始するアニメーションを入力する変更

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 >

Enter Animation Opacity Documentationで詳細をご覧ください。

Animationの開始回転を変更する変更

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 >

詳細については、Enter Animation Rotateドキュメントをご覧ください。

Animation Startingスケールの入力を変更します

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 >

Enter Animationスケールのドキュメントで詳細をご覧ください。

ANIMATIONの変更を変更してください翻訳

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ドキュメントをご覧ください。

EXITアニメーションの終了不透明度を変更します

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 >

Exit Animation Opacity Documentationで詳細をご覧ください。

Exit Animation Ending Rotationを変更します

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 >

Exit Animation Rotateドキュメントで詳細をご覧ください。

Exit Animation Endingスケールを変更します

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 >

Exit Animationスケールのドキュメントで詳細をご覧ください。

Exitアニメーションエンディングの変更翻訳

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 >

Exit Animation翻訳ドキュメントで詳細をご覧ください。