Framer Motion（React动画库）

官网：https://www.framer.com/docs/introduction/

cnpm i framer-motion

基本用法

框架：next.js
//css
.title{
  font-size: 30px;
}
.ball{
  height: 10px;
  width: 10px;
  background-color: chocolate;
}
//page/about
import React from 'react'
import { motion } from 'framer-motion'
function index() {
  return (
      <div>
        <div className="title">demo</div>
        <motion.div
          className="ball"
          animate={{
            x: 150,
            y:150,
            rotate:300
          }}
        />
      </div>
  )
}
export default index

1.annimation

 <motion.div
          className="ball"
          animate={{
            x: [0,100,0],
            y:150,
            rotate:300
          }}
        />

     <svg height="600" width="600">
          <motion.circle  
          cx={500}
          animate={{ cx: [null, 100, 200],cy:50,r:40,fill:'#ccc',stroke:"#000",strokeWidth:"5" }} 
          transition={{duration: 3, times: [0, 0.2, 1] }}
          />
          </svg>