主流 App 的界面动效录屏库:2000+ 条覆盖 487 个应用,按手势/交互模式筛选
AnimXYZ
像拼词一样写动画:fade、up、slide 组合即成效果,3KB 搞定
内容更新日期 · 2026-10-01
What is it · 它是什么
什么是 AnimXYZ
AnimXYZ 自称「首个可组合式 CSS 动画工具包」:把 fade、scale、up、slide 这些词像拼积木一样组合,就是一段进场/退场动画,不用手写关键帧;细节用 CSS 变量调,嵌套元素和列表错落(stagger)动画也支持。基础功能约 3KB,含工具类约 12KB,原生 HTML/Vue/React 都有官方集成,开源免费。
How to use · 怎么用
怎么用 AnimXYZ
- 官网首页的 playground 里拼几个词实时看效果。
- 把组合好的类名(xyz-in 之类)贴进项目。
- 列表动画用 stagger,进出场各一套组合。
Key features · 核心特点
AnimXYZ 的核心特点
- 类名拼词组合动画,零关键帧
- 基础仅约 3KB,轻到没负担
- CSS 变量控制细节,嵌套/错落支持
- Vue/React 官方集成,开源免费
