AnimXYZ

一、网站简介

AnimXYZ 被誉为「首个真正可组合的 CSS 动画库」，它开创性地使用 CSS 变量（Custom Properties）来驱动动画，让开发者无需编写任何关键帧（@keyframes）代码，仅通过组合简单的工具类名即可创建几乎无限数量的独特动画。例如，在一个元素上同时添加 xyz-in、fade、up、big 等类名，就能实现从上方大幅淡入的组合动画。AnimXYZ 专为 Vue、React、SCSS 和纯 CSS 项目构建，以极简的 API 实现了高度灵活和可定制的动画编排。

二、公司背景

AnimXYZ 由 Ingram Projects 团队开发并开源，项目在 GitHub 上获得了广泛关注，并被 Smashing Magazine、CSS-Tricks 等知名前端媒体推荐。Ingram Projects 专注于为现代 Web 开发提供创新工具，AnimXYZ 是其旗舰产品。项目采用 MIT 许可证完全开源，支持社区贡献，目前已推出针对 React、Vue 2、Vue 3 的官方绑定包，生态逐步完善。

三、核心功能

组合式动画类名：通过 xyz-in（入场）/ xyz-out（出场）基础类名，结合方向（up/down/left/right）、幅度（small/medium/big）、样式（fade/flip/rotate）等修饰符自由组合，一个元素可以叠加多个动画描述词，产生丰富的复合效果。CSS 变量精确控制：所有动画参数通过 –xyz-* 命名空间的 CSS 变量暴露，包括动画时长、延迟、错开（stagger）、缓动曲线、透视距离等，开发者可在 CSS 中或通过 JavaScript 动态覆盖这些变量实现精细控制。交错过场（Stagger）动画：内置强大的 stagger 机制，当多个子元素同时触发动画时，它们会自动按顺序错开播放，形成优雅的涟漪式过场效果，非常适合列表和网格布局的入场动画。框架专用集成：提供 @animxyz/vue、@animxyz/vue3、@animxyz/react 官方包，通过组件化的方式（如 Vue 的 XyzTransition 组件）在框架中实现元素进入/离开的自动动画编排，与 Vue Transition 和 React Transition Group 无缝配合。实用工具类扩展：除了动画类名，AnimXYZ 还提供 xyz-none（禁用动画）、xyz-paused（暂停动画）等控制类名，以及响应式工具类（如 xyz-{breakpoint}-{animation}），在不同屏幕尺寸下应用不同动画。

四、网站特点

无关键帧编程：完全不需要编写 @keyframes，动画逻辑被抽象为一组可组合的语义化类名，极大降低了 CSS 动画的心智负担。CSS 变量体系优雅：基于 CSS 变量的设计使得动画参数可以在样式表的任何层级被覆盖，与 CSS 层叠继承机制天然契合，动态调整动画非常方便。框架原生体验：专为现代前端框架设计的集成包，使用方式贴合 Vue 和 React 开发者的习惯，动画生命周期与组件生命周期自动绑定。体积小巧：核心 CSS 文件体积仅约 12KB（gzip 后更小），框架绑定包也极其轻量，对项目性能影响很小。

五、适用人群

Vue/React 开发者：在单页面应用（SPA）中需要处理大量的组件过渡动画，AnimXYZ 的框架集成方案比手写 CSS Transition 更高效。追求代码简洁的前端工程师：厌倦了为每个动画编写冗长的 @keyframes 和 animation 属性，希望用类名组合的方式快速实现动效。创意交互设计师：利用 AnimXYZ 的 stagger 和组合机制，快速实现充满设计感的列表入场、页面切换等复杂动画效果，验证交互创意。初创团队快速开发：在 MVP 阶段需要快速为产品添加流畅的动效，AnimXYZ 的低学习成本和开箱即用特性非常契合快速迭代需求。

六、应用场景

列表与网格入场动画：电商商品列表、作品集网格、博客文章卡片等场景，使用 stagger 效果让每个卡片依次淡入，视觉节奏感极佳。单页应用路由切换：在 Vue Router 或 React Router 的页面切换中使用 AnimXYZ 实现流畅的页面过渡动画，提升 SPA 的整体体验。模态框/弹窗动画：为模态框的打开和关闭添加组合动画（如缩放+淡入、滑入+翻转），让弹窗的出现和消失更自然。通知/Toast 消息队列：多个通知消息依次出现时，利用 stagger 机制让它们有序地滑入，避免同时出现的视觉混乱。

七、常见问题（FAQ）

Q：国内能否直接访问 AnimXYZ 官网？A：可以。AnimXYZ 官网 animxyz.com 在国内网络环境下可以直接访问，CDN 资源也可通过 jsDelivr 等国内可达节点加载，使用体验良好。

Q：AnimXYZ 是免费的吗？A：是的，AnimXYZ 是完全免费的开源项目，采用 MIT 许可证，可用于个人和商业项目。核心库和所有框架绑定包均免费提供。

Q：AnimXYZ 和 Animate.css 有什么区别？A：Animate.css 提供固定的预设动画（如 bounce、fadeIn），每种动画是独立的。AnimXYZ 则采用组合式设计，通过叠加多个修饰类名生成复合动画，灵活性更高。此外 AnimXYZ 提供了框架专用集成和 stagger 交错动画，更适合现代前端项目。两者可以互补使用。

Q：如何自定义动画的缓动曲线和速度？A：AnimXYZ 通过 CSS 变量暴露所有动画参数。你可以在 CSS 中覆盖 –xyz-ease（缓动函数）、–xyz-duration（时长）、–xyz-delay（延迟）、–xyz-stagger（交错时间）等变量来自定义动画行为，也可以在特定元素上使用内联样式动态设置。

八、类似网站

Animate.css：经典的 CSS 动画库，提供 60+ 种即用型预设动画效果。GSAP：功能最强大的 JavaScript 动画引擎，适合复杂动画编排和滚动驱动动画。Motion One：基于 Web Animations API 的轻量动画库，API 设计现代且支持 Tree Shaking。