全新的动画神器！3 行代码搞定所有动效！支持 Vue、React、JS

在前端项目中做动画，一直是很多同学非常头疼的一件事。为啥呢？一是不熟悉、二是写起来非常麻烦。哪怕你引入了很多动画库（如：GSAP）写起来依然非常的麻烦。因此，咱们都迫切希望有一个使用简单、功能强大的动画库。

Hello，大家好，我是 Sunday

在前端项目中做动画，一直是很多同学非常头疼的一件事。

为啥呢？

一是不熟悉、二是写起来非常麻烦。哪怕你引入了很多动画库（如：GSAP）写起来依然非常的麻烦。

因此，咱们都迫切希望有一个 使用简单、功能强大 的动画库。

那么，现在有了！它就是 Motion

它基于浏览器原生的 Web Animations API 构建，拥有极高性能和零依赖特性。

更重要的是，它的思路彻底告别了传统的 CSS 类名动画，不需要 维护一堆 .enter-active、.leave-to，只需要在组件上写一个配置对象，就能完成复杂动效。

是不是和其他的动画库大有不同呀。那么下面咱们就一起来看看这个库的核心价值与应用方案

传统 CSS 动画存在的问题

最传统的动画方案自然是 CSS 动画了。

通常咱们去写 CSS 动画时，都通过 transition 或 @keyframes 实现过渡，比如：

// push页面时：新页面的进入动画
.push-enter-active {
  animation-name: push-in;
  animation-duration: 0.4s;
}
// push页面时：老页面的退出动画
.push-leave-active {
  animation-name: push-out;
  animation-duration: 0.4s;
}
// push页面时：新页面的进入动画
@keyframes push-in {
  0% {
    transform: translate(100%, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}

但是这样实现会遇到很多的问题。

首先就是：动画逻辑和业务状态分离，不易维护。并且复杂动画需要多个类名、多个状态切换，动画完成后无法轻易做事件回调。

因此，很多同学更加会通过 JS 来控制动画。比如：requestAnimationFrame、Anime.js、GSAP 等等的。

但是，JS 也有新的问题。比如：不同的框架集成方式，有的适配 Vue、有的适配 React。单独适配 JS 的库，放到不同的框架中写法兼容上又不是太好。

所以，JS 完成动画虽然功能强大，但是这些方案都局限于各自生态，局限性还是很大的。

Motion 的价值是什么？

既然 CSS 方案维护麻烦，JS 动画又各自为政，那有没有一种方式，能同时兼顾性能、易用性、与跨框架兼容性？

这就是 Motion 的意义所在啦。

Motion 的核心价值，其实可以用三个词来概括：统一（Unified）、高性能（Performant）、声明式（Declarative）

1. 统一

Motion 最大的优势，就是它完全基于浏览器原生的 Web Animations API 构建。

这意味着：你写的动画逻辑，可以不依赖任何框架。

场景	用法
Vue3	`<motion.div :animate="{ opacity: 1, y: 0 }" />`
React	`<motion.div animate={{ opacity: 1, y: 0 }} />`
原生 JS	`animate(element, { opacity: [0, 1], y: [50, 0] })`

同一套语法，跨框架可用。 这也是它比 GSAP、Anime.js 更“现代”的地方：不需要适配层、不需要封装 Hook 或指令。

2. 高性能

Motion 并不是在 JS 层模拟动画，而是直接使用浏览器内置的 Web Animations API。

这带来了两个核心优势：

更流畅的性能表现：：由浏览器底层接管动画帧率控制，可自动利用 GPU 加速；
更低的计算开销：JS 主线程无需持续执行动画逻辑，动画不会被业务逻辑阻塞；

换句话说，即便在动画播放时执行大量渲染任务，Motion 依然能保持稳定帧率。

3. 声明式

传统动画是“命令式”的，你需要告诉浏览器每一帧该怎么动。

但是Motion 的思路完全相反：你只需要描述 初始状态（initial） 和 目标状态（animate）（有点类似于补间动画），剩下的交给引擎自动计算。

举个最简单的例子

<template>
  <motion.div 
    :initial="{ opacity: 0, y: 50 }"
    :animate="{ opacity: 1, y: 0 }"
  >
    Hello Sunday!
  </motion.div>
</template>

三行代码，就能实现一个优雅的“淡入上升”动画。无需定义类名、无需监听过渡事件、也无需写 @keyframes。

如何使用 Motion

Motion 的安装和使用也非常简单。根据你使用的框架选择对应包即可。

# Vue 版本
npm install motion-v

# React 版本
npm install motion

# 原生 JS 版本
npm install motion

然后在项目中引入即可：

Vue 示例：

<script setup>
import { Motion } from 'motion-v'
</script>

<template>
  <Motion.div
    :initial="{ opacity: 0, scale: 0.9 }"
    :animate="{ opacity: 1, scale: 1 }"
    :transition="{ duration: 0.6, easing: 'ease-out' }"
  >
    动画出现了
  </Motion.div>
</template>

React 示例：

import { motion } from "motion/react"

export default function Demo() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.9 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={{ duration: 0.6, easing: "ease-out" }}
    >
      动画出现了
    </motion.div>
  )
}

是不是非常优雅？所有动画都可以直接通过属性控制，不需要定义类名，也不需要管理生命周期。