Anime.js 动画技能基于轻量但功能强大的 JavaScript 动画引擎 Anime.js，用于创建复杂、高性能的网页动画，尤其擅长复杂时间线、交错动画以及对 DOM、CSS 和 SVG 的精确控制。资料称其适合用于创建远超简单 CSS 过渡的高保真网页动画，是制作奖项级交互站点的工具选择。
用途方面，该技能被触发的典型场景包括：创建复杂、多阶段的落地页编排；为网格、文字或数据可视化实现交错揭示动画；对 SVG 路径进行动画（形变动画、动态线条绘制）；构建对用户输入流畅响应的高交互、动态 UI 元素。
执行工作流包含几个步骤。首先识别目标：选择要动画的 DOM 元素或 SVG。其次定义属性与缓动：指定要动画的值，并强调使用高级缓动函数（如自定义 cubicBezier、spring 或 elastic），而非基础的 linear 或 ease-in-out，以使运动感觉更自然、更有质感。然后是编排时间线：先检查已安装的主版本；资料中的示例针对 Anime.js v3，使用 anime.timeline() 来编排复杂动作，并掌握时间线偏移（相对偏移如 '-=200' 与绝对偏移）以创建无缝重叠的运动。实现阶段给出 v3 代码示例：在已安装 Anime.js v3 的打包环境中，通过 import anime from "animejs" 引入 anime 绑定，选择器必须存在于已渲染的 DOM 中。示例代码创建一个带有 spring 缓动的时间线，先让 .hero-text 以 translateY 从 50 到 0、透明度从 0 到 1 并配合 anime.stagger(100) 延迟出现，再以 '-=800' 的相对偏移让 .hero-image 进行缩放和淡入。
关于运动与兼容性，资料建议：运动的范围应服务于产品需求和用户任务，并尊重既有设计系统，简单过渡和静态状态同样是有效选择；广泛利用 anime.stagger() 为多个元素增添有机节奏；监控主线程占用，在合适处使用 will-change: transform, opacity 以获得 GPU 加速。
限制方面，资料明确指出：上述代码使用 v3 API，而 Anime.js v4 使用导入的 createTimeline() 以及不同的目标与参数签名，不要混用不同主版本的示例，应查阅已安装版本对应的官方时间线文档。需尊重 prefers-reduced-motion，提供静态最终状态，避免滚动劫持，并保持焦点与键盘交互立即可用；组件卸载时应释放动画。will-change 只是临时优化提示，并不保证 GPU 加速，应测量真实帧率，避免在所有元素上长期保留。该技能仅应在任务明确匹配上述范围时使用，输出不能替代针对具体环境的验证、测试或专家审查；如果缺少必要输入、权限、安全边界或成功标准，应停止并请求澄清。