### Framer Motion とは Framer Motion は React アプリケーションに簡単にアニメーションを追加できるライブラリです。軽量で柔軟性が高く、エンジニアが簡単に自然なアニメーションを実装するためのツールを提供してくれます。 https://motion.dev/ ### 実装環境 - React - Framer Motion ### インストールまずは Framer Motion をインストールします。 ```bash npm install framer-motion ``` 以下のようなシンプルなボタンを実装します。 https://codesandbox.io/p/sandbox/4krsmg ### マウスオーバーで拡大するボタンまずは、ボタンにマウスオーバーした際に少しだけ拡大するエフェクトを実装してみましょう。 ```tsx import "./styles.css"; import { motion } from "framer-motion"; export default function App() { return ( <> Hover Me ); } ``` 上記のコードでは、`whileHover` プロパティを使ってボタンがマウスオーバー時に 1.1 倍に拡大するアニメーションを実装しています。`transition` の設定でアニメーションのスピードや遅延を調整できます。 ```css .btn { width: 200px; height: 80px; border-radius: 4px; border: none; background-color: #38bdf8; color: #ffffff; font-size: 16px; cursor: pointer; } ``` ### マウスオーバーで奥側に回転するボタン次に、ボタンにマウスオーバーした際に奥側に回転するエフェクトを追加します。 ```tsx import "./styles.css"; import { motion } from "framer-motion"; export default function App() { return ( <> Rotate Me ); } ``` animate 関数で、HTML および SVG スタイルをアニメーション化できます。 `rotateX` プロパティを使うことで、ボタンが奥側に回転するような効果を実現しています。`easeInOut` を使ってスムーズに回転させることで、ユーザーに心地よいエフェクトを提供します。 ### マウスオーバーで色が変わるボタン最後に、ボタンの色をホバー時に変化させるアニメーションを見てみましょう。 ```tsx import "./styles.css"; import { motion } from "framer-motion"; export default function App() { return ( <> Change Color ); } ``` `backgroundColor` を使うことで、マウスオーバー時にボタンの色を変化させています。このようにシンプルなエフェクトを加えることで、ユーザーのインタラクションに応じた視覚的なフィードバックを提供できます。 ### マウスオーバーでボタンが少し浮き上がり、影がつくこちらは、マウスオーバーでボタンが少し浮き上がり、影がつくアニメーションです。視覚的にボタンが浮いて見える効果を簡単に追加できます。 ```tsx import "./styles.css"; import { motion } from "framer-motion"; export default function App() { return ( <> Lift Me ); } ```

Framer Motion でボタンのホバーエフェクトを実装する