在前端開發也不乏前端動畫的任務，因為在使用 Chakra UI 使用 style props 做開發。如果還是像過去一樣實做動畫是靠 css animation 添加，較為不方便。

在踏入 React 的是世界前，喜歡使用 css animation 相關的 lirbrary 來完成動畫

使用基於 React 而生的動畫 lirbrary 較為方便，目前自己有嘗試過的 React 動畫庫有 react-spring 、framer-motion。兩個都非常的方便與功能都很齊全也有支援 hook，並且持續更新推出新功能

react-spring beta 版本

frame-motion

Charkra UI 不少元件是使用 framer-motion 製作，在安裝 Charkra UI 同時也裝好了 framer-motion，可以直接使用，通常我就會直接搭配使用 framer-motoin 作為動畫的 library 。

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

motion

motion component 是 framer-motion 最基礎的元件，可以套用到各種 html 和 svg 元素，像是 motoin.div、motion.path 等。
我們可以對 motoin 進行下列的使用:

• 通過 prop 製作動畫效果 (animate、initial)
• 添加會促發手勢 gestures，手勢是只能促發的互動包含了拖移 drag 、hover、 scroll
• 針對手勢去添加動畫
• 可以添加 variants 來設定動畫狀態

可以看官方詳細文件說明

這裡就以　motion.div 運用 initial、animate、transition 做出基礎範例

import { motion } from "framer-motion";  // 引入 motiom component


export default function App() {
  return (
    <motion.div
      className="box"
      initial={{ opacity: 0, scale: 0.5 }}　　// initial  初始狀態
      animate={{ opacity: 1, scale: 1 }}　　　// animate  動畫狀態
      transition={{ repeat: Infinity, duration: 2 }}　　// transition 過度
    />
  );
}

codesandbox 來看效果