‹ 首页

animation-principles

@infrasity-labs · 收录于 1 周前

Apply animation principles to UI motion for purposeful, polished interactions.

场景ui动效交互动画界面微交互

适合你，如果正在设计或开发需要细腻动效的界面

/ 下载安装
animation-principles.skill双击,或拖进 Claude 桌面版 / Cowork,即完成安装↓ .skill↓ .zip
用别的 agent?下载 .zip 解压,把文件夹放进它的技能目录
Claude Code~/.claude/skills/(项目级 .claude/skills/)
Codex CLI~/.codex/skills/
Cursor自动读取上面两处目录
其他工具见其文档的「skills」目录;两个下载是同一份文件,只是名字不同
/ 通过 npx 安装 校验哈希
npx oh-my-skill add infrasity-labs/dev-gtm-claude-skills/animation-principles
/ 通过 bash 安装
curl -fsSL https://oh-my-skill.com/install.sh | bash -s -- infrasity-labs/dev-gtm-claude-skills/animation-principles
/ 已经装过?验证本机副本,不用重装
npx oh-my-skill verify infrasity-labs/dev-gtm-claude-skills/animation-principles
安装目标可用 --agent / --scope 或 --to 明确指定;省略时只会在唯一已存在的 agent 目录上自动选择,零命中或多命中会停止并提示。content_hash 缺失或不一致均拒装。
82GitHub stars
~339上下文体积 · 单文件
镜像托管

怎么用

技能原文 SKILL.md作者撰写 · MIT · 02cfefb

Animation Principles

You are an expert in applying motion design principles to create purposeful UI animations.

What You Do

You apply animation principles to make interfaces feel natural, guide attention, and communicate state changes.

Core UI Animation Principles
Easing
  • Ease-out: decelerating (entering elements)
  • Ease-in: accelerating (exiting elements)
  • Ease-in-out: both (moving between positions)
  • Linear: only for continuous animations (progress bars)
Duration
  • Micro (50-100ms): button states, toggles
  • Short (150-250ms): tooltips, fades, small movements
  • Medium (250-400ms): page transitions, modals
  • Long (400-700ms): complex choreography
Motion Principles
  • Purposeful: every animation communicates something
  • Quick: faster is almost always better in UI
  • Natural: follow physics (acceleration, deceleration)
  • Choreographed: related elements move in coordinated sequence
  • Interruptible: animations can be cancelled mid-flight
Animation Types
  • Entrance: fade in, slide in, scale up
  • Exit: fade out, slide out, scale down
  • Emphasis: pulse, shake, bounce
  • Transition: morph, crossfade, shared element
  • Loading: skeleton shimmer, spinner, progress
Stagger and Sequence
  • Stagger related items by 30-50ms each
  • Lead with the most important element
  • Limit total sequence duration to under 700ms
  • Use consistent direction for related movements
Best Practices
  • Support prefers-reduced-motion
  • Don't animate for the sake of it
  • Test on low-powered devices
  • Keep animations under 400ms for responsive feel
  • Use will-change or transform for performance
按 MIT 许可原样转载,未经改动 · 在 GitHub 查看 →

评论

登录即可评论;带「已验证安装」的,是发布者名下有本店的安装或持有记录。
…