transitions.dev
提供可直接复用的CSS交互动画代码片段库。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：transitions.dev。 它的用途是：提供可直接复用的CSS交互动画代码片段库。 完整的 Skill 内容见：https://321skill.com/skills/transitions-dev-jakubantalik/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我想给这个按钮添加一个点击后的弹性缩放效果。”，它会引导你使用该Skill，找到‘Notification badge’或‘Success check’等类似效果的CSS片段供你复制。或者，你可以说：“用transitions.dev的技能，给我的模态框添加一个平滑的打开和关闭动画。”，AI会直接应用对应的‘Modal open / close’过渡代码到你的项目中。
介绍
Transitions.dev 是一个专注于解决前端开发中交互动画实现复杂、代码复用率低问题的资源库。它收集了多种常见的UI交互模式（如卡片缩放、模态框弹出、菜单下拉等），并为每种模式提供了可直接复制粘贴的CSS代码片段。
开发者无需安装任何依赖，只需访问网站，点击对应动画效果的卡片，即可复制其自包含的CSS代码。这些代码片段语义化良好，使用CSS自定义属性定义变量，并通过t-*类名进行命名空间隔离，同时内置了对prefers-reduced-motion媒体查询的支持，确保了无障碍体验。
该技能非常适合前端开发、UI设计师以及任何需要在Web项目中快速实现平滑、专业级动画效果的角色。无论是构建后台管理系统、营销落地页还是复杂的交互式应用，都能从中找到合适的动画解决方案。
建议在使用时，先通过网站预览动画效果，确认符合需求后再复制代码。虽然代码是自包含的，但粘贴到项目后，仍需根据实际的HTML结构和类名进行微调。对于更复杂的定制需求，可以基于提供的CSS变量进行扩展。
核心特点
与普通CSS动画库不同，它提供的每个动画都是独立、自包含的CSS片段，包含完整的变量定义、命名空间和减少运动偏好支持，可直接粘贴使用，无需引入整个库或担心样式污染。同时，它配套了CLI工具和AI Agent Skill，支持命令行一键安装和AI辅助集成，极大提升了开发效率。
注意事项
主要提供CSS层面的动画解决方案，对于需要复杂JavaScript逻辑控制的交互动画支持有限。
常见问题
这些CSS代码可以直接用在React/Vue项目里吗？
可以，复制的CSS片段是纯样式，不依赖特定框架，只需确保对应的HTML结构和类名匹配即可。
如何修改动画的速度或缓动效果？
每个片段都使用CSS自定义属性（如 --t-duration）控制参数，直接在:root或对应元素上覆盖这些变量即可自定义。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/transitions-dev-jakubantalik/raw/index.md 读取 transitions.dev 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/transitions-dev-jakubantalik/raw/index.md（查看排版版本）