追い風モーション

✨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でプリセットの 1 つを使用できます。

モーションプリセット

コンポーネントを簡単にアニメーション化するためのプリセットのコレクションが提供されています。

• フェード: 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
• Wiggle : motion-preset-wiggle
• 紙吹雪: motion-preset-confetti
• タイプライター: motion-preset-typewriter-[number of characters]
• Flomoji : motion-preset-flomoji

プリセットのカスタマイズ

基本アニメーションとモディファイア クラスを使用して、プリセットをさらにカスタマイズできます。

例えば：

• motion-preset-fadeに遅延を追加します。

">

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