mcpField
A
animate

animate

github.com/delphi-ai设计与 UI1363.7k 次安装39 周前更新
代码仓库

关于 animate

animate 是为 Next.js 和 React 应用提供动画实现指导的技能，面向前端开发者。内容涵盖 CSS 动画、Framer Motion、缓动、性能与无障碍，并提供常见动效模式和参考资料。

主要功能

  1. 01CSS 动画与过渡建议
  2. 02Framer Motion 使用指导
  3. 03缓动与时长参考
  4. 04性能和无障碍注意事项
  5. 05常见交互动画模式

适用场景

  1. 01为界面元素添加悬停效果
  2. 02实现组件进入与退出动画
  3. 03制作布局或共享元素过渡
  4. 04选择滚动或拖拽动画方案

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/delphi-ai/animate-skill --skill animate

安装后在 Claude Code 中输入/animate确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

README.md
examples/
card-hover.tsx
animate-height.tsx
toast-stacking.tsx
text-reveal.tsx
shared-layout.tsx
app-store-card.tsx
multi-step-flow.tsx
feedback-popover.tsx
references/
css-animations.md
framer-motion.md
easing-and-timing.md
performance-accessibility.md

详细介绍

Next.js 动画

概述

此技能提供了在 Next.js 和 React 应用中实现流畅、高性能且易于访问的动画的全面指南。内容涵盖 CSS 动画、Framer Motion、缓动原则和无障碍注意事项。

快速参考

缓动速查表
动画类型缓动方式时长
元素进入ease-out200-300ms
元素在屏幕上移动ease-in-out200-300ms
元素退出ease-in150-200ms
悬停效果ease150ms
仅透明度变化linear不固定
CSS 自定义属性（推荐）
:root {
  --ease-out-quint: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);
  --ease-out-cubic: cubic-bezier(.33, 1, .68, 1);
}

常见动画模式

1. 悬停上浮效果
.card {
  transition: transform 200ms var(--ease-out-quint),
              box-shadow 200ms var(--ease-out-quint);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}
2. 按钮按压效果
.button {
  transition: transform 100ms ease-out;
}
.button:active {
  transform: scale(0.97);
}
3. 挂载时淡入（Framer Motion）
<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.3, ease: [.23, 1, .32, 1] }}
>
  Content
</motion.div>
4. 带退出动画的模态框
<AnimatePresence>
  {isOpen && (
    <motion.div
      initial={{ opacity: 0, scale: 0.95 }}
      animate={{ opacity: 1, scale: 1 }}
      exit={{ opacity: 0, scale: 0.95 }}
      transition={{ duration: 0.2, ease: "easeOut" }}
    >
      {children}
    </motion.div>
  )}
</AnimatePresence>
5. 标签页指示器（共享布局）
{tabs.map(tab => (
  <button key={tab} onClick={() => setActive(tab)} className="relative px-4 py-2">
    {tab}
    {active === tab && (
      <motion.div
        layoutId="tab-indicator"
        className="absolute inset-0 bg-blue-500 rounded -z-10"
        transition={{ type: "spring", stiffness: 400, damping: 30 }}
      />
    )}
  </button>
))}
6. 列表交错动画
const container = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { staggerChildren: 0.1 }
  }
}

const item = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0 }
}

<motion.ul variants={container} initial="hidden" animate="visible">
  {items.map(i => <motion.li key={i} variants={item}>{i}</motion.li>)}
</motion.ul>

黄金法则

  1. 退出速度快于进入：退出动画的时长应为进入动画的约 75%
  2. 只为 transform 和 opacity 添加动画：它们由 GPU 加速
  3. 200-300ms 是最佳范围：大多数动画都应在此范围内
  4. 始终遵循 prefers-reduced-motion：参见参考资料中的无障碍部分
  5. 对可中断的动画使用弹簧效果：用户中断动画时，能带来更好的体验

示例

课程中的完整可运行示例位于 examples/ 目录中：

示例描述关键技术
card-hover.tsx悬停时向上滑出的描述CSS 过渡、transform、opacity
toast-stacking.tsx动画提示通知CSS 自定义属性、data-* 触发器
text-reveal.tsx字母交错动画@keyframes、animation-delay、calc()
shared-layout.tsx元素位置/尺寸变形Framer Motion layoutId
animate-height.tsx平滑改变高度useMeasure、动画高度
multi-step-flow.tsx定向步骤向导AnimatePresence、自定义变体
feedback-popover.tsx按钮展开为弹出框嵌套 layoutId、表单状态
app-store-card.tsxiOS 风格卡片展开多个 layoutId 元素

如需使用示例，请通过以下命令阅读：Read examples/<name>.tsx

参考资料

如需详细文档，请阅读以下参考文件：

  • references/easing-and-timing.md - 缓动函数、计时指南、弹簧配置
  • references/css-animations.md - 变换、过渡、关键帧、clip-path
  • references/framer-motion.md - Motion 组件、AnimatePresence、变体、布局动画、钩子
  • references/performance-accessibility.md - 60fps 优化、prefers-reduced-motion、无障碍

何时使用哪种方案

场景推荐方案
简单的悬停效果CSS 过渡
进入/退出动画Framer Motion + AnimatePresence
布局变化Framer Motion layout 属性
共享元素过渡Framer Motion layoutId
与滚动关联的动画Framer Motion useScroll
复杂的编排式动画Framer Motion 变体
拖拽交互Framer Motion 拖拽手势
对性能要求严格仅使用 transform 的 CSS

依赖项

如需运行 Framer Motion 示例，请安装：

pnpm add framer-motion react-use-measure usehooks-ts

评论

支持 Markdown