Tailwind css motionでアニメーションをつけてみた

動作環境

• Next.js:15.1.3
• React:19.0.0
• Tailwindcss:3.4.1
• Tailwindcss-motion: 1.0.0

参考

• Tailwindcss-motion documentation: https://rombo.co/tailwind/
• Kevin Grajeda:https://x.com/k_grajeda
• Theo -t3.gg: https://youtu.be/gTi7whoLFGc?si=cNSvGWcsLdolhho1

上記のを主に参考にして作りました。
今回の記事の内容を反映したサイト
https://sample-animation-for-tailwind.vercel.app/
リポジトリ
https://github.com/Ayumu3746221/sample-animation-for-Tailwind

本題

今回はNext.jsやTailwindのインストールから初期設定は割愛します。

インストールから設定まで

• tailwindcss motionのインストール

npm i -d tailwindcss-motion

• tailwindの設定ファイルに下記を設定します。

// tailwind.config.ts

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

これで設定完了と思っていたのですが、vercelにデプロイするときにbuild errorを吐いたのでpackage.jsonを修正しました。

//package.json
~~
"dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "next": "15.1.3",
    "tailwindcss-motion": "1.0.0" //これを追加
  },
~~

実際に書いてみる

実際に使用したコードを一部省略して紹介します。

<h2 className="motion-preset-slide-left hover:motion-preset-expand motion-duration-1000">
Sample Animation for TailWind
</h2>

• motion-preset-slide-left:テキストが右から左へスライドしてきます
• hover:~:マウスを要素の上に置いたときに動作が加わります。
• motion-duration-1000:数値を変更すると動作にかかる時間を変更できます。

基本的にleftやrigthは要素が移動する向きを表してる。

className="motion-preset-bounce motion-duration-700 motion-rotate-in-[-360deg]"

• motion-preset-bounce:要素が上から落ちてきてバウンドします
• motion-rotate-in-[-360deg]:要素が右周りに一回転

上記をいろいろ組み合わせて高度なアニメーションを作れるみたいですが、そもそも高度なアニメーションを使用する機会が少ないから今回は割愛

ちなみに冒頭で紹介したdocumantationをのページをスクロールしていくと、直感的にアニメーションを作れるので高度なアニメーションを作りたい人は是非

https://rombo.co/tailwind/