把好交互，
变成你的直觉。

动效手记是一个面向中文用户的互动学习网站。无论你用 AI 做产品，还是自己写前端，都可以从一个具体效果开始。

这里怎么学

先操作，再比较，最后解释。每个实验围绕一个明确问题，配有适用场景、应用描述、小测验和方法笔记。前后对比是教学示意，不冒充 AI 生成的实测报告。

内容从哪里来

方法笔记基于作者已整理的 Animations.dev Skills 中文自学资料，包含 15 篇主题笔记和 4 篇附录。整理中保留了原文的设计偏好，并补充了技术边界与校正。它不是 animations.dev 官方中文课程，也不声称完整复刻其付费课程。

交互实验由本站独立实现。示例中的数值是帮助理解的起点，不代表每种产品都应该使用同一时长、曲线或阻尼。

• Animations on the Web / Emil Kowalski：原方法资料提及的课程与作者。
• MDN Web Docs：CSS、SVG 与浏览器 API 的技术资料。
• Motion 官方文档：方法笔记中有关 React 动画库的补充资料。
• Transitions.dev、Hairline：交互展示与细线图形的设计参考。本站没有重新分发它们的素材库。

阅读技术校正与版本边界 →

制作与纠错

由 ZJY365 制作。发现内容、键盘操作或手机体验的问题，欢迎带着页面地址和复现步骤联系作者。

聊聊你的项目

把方法，带进你的产品。

网站内容可以直接学习。配套 Skills 为付费资料，适用范围、交付与价格在微信中沟通。

手机可保存图片，在微信「扫一扫 → 相册」中识别。

保存二维码查看大图

带着案例来，更容易聊清楚

我从「内容纠错与建议」来到这里，想把交互方法用在自己的项目中，想了解 Skills 的适用工具和使用方式。

复制咨询说明

添加与交流由你完成。这里不会自动发送消息，也不提供站内支付。

学习与付费资料

网站公开学习内容无需注册。配套 Skills 的资料范围、适配与费用在微信中沟通。我们不通过虚构销量、效果提升百分比或保证生成质量来推销。