重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
universal-elements by dylantarre/animation-principles
npx skills add https://github.com/dylantarre/animation-principles --skill universal-elements将迪士尼的 12 条动画原则应用于任何 UI 元素,以实现一致、专业的动效设计。
任何响应交互的元素都可以挤压(在碰撞/按压时压缩)和拉伸(在释放时延伸)。保持微妙:UI 元素最大变形幅度为 2-5%。
在任何重要动作之前,一个简短的准备性动作预示着即将发生什么。放大前先缩小,向前推进前先向后拉。持续时间为 50-100 毫秒。
将注意力引导到最重要的元素上。利用动效、大小、颜色、z-index 和模糊度的对比来创建清晰的视觉层次。
大多数 UI 采用关键帧动画:明确定义开始和结束状态。逐帧动画适用于粒子或有机形状等自然流畅的动画。
没有东西会同时全部停止。子元素滞后于父元素。阴影在物体稳定后落下。将相关元素错开 20-50 毫秒。
黄金法则:UI 动效切勿使用 linear。进入时用 ease-out,退出时用 ease-in,过渡时用 ease-in-out。
自然运动遵循曲线路径。在水平过渡中添加细微的垂直移动。在平移的同时旋转。避免机器人般的直线运动。
每个主要动作都应配有辅助动画。阴影变化、颜色偏移、图标旋转、发光效果可以强化主动作而不会喧宾夺主。
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 元素类型 | 快速 | 正常 | 慢速 |
|---|---|---|---|
| 微型(图标、按钮) | 50-100ms | 100-200ms | 200-300ms |
| 小型(卡片、输入框) | 150-200ms | 200-300ms | 300-400ms |
| 中型(模态框、菜单) | 200-250ms | 250-350ms | 350-500ms |
| 大型(页面、覆盖层) | 300-400ms | 400-600ms | 600-800ms |
使动画强度与上下文相匹配。庆祝时刻允许 20-30% 的夸张。专业环境保持在 10% 以下。错误状态可以更具戏剧性。
保持视觉一致性:圆角比例、阴影方向、间距节奏、字体比例尺。动画过程中不应有任何扭曲或破坏。
目标是在不分散注意力的前提下带来愉悦感。流畅的动画建立信任感。敏捷的反馈让人感觉响应迅速。最好的动画是能被感受到,而不是被注意到。
/* 通用过渡基础 */
* {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
/* 标准持续时间作为自定义属性 */
:root {
--duration-fast: 100ms;
--duration-normal: 200ms;
--duration-slow: 350ms;
--ease-out: cubic-bezier(0.0, 0, 0.2, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
--ease-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
/* 应用于任何交互式元素 */
.interactive {
transition: transform var(--duration-normal) var(--ease-standard),
opacity var(--duration-normal) var(--ease-standard),
box-shadow var(--duration-normal) var(--ease-standard);
}
transform: 通用定位和缩放opacity: 可见性过渡transition: 状态变化animation: 复杂序列box-shadow: 深度和强调每周安装量
53
代码仓库
GitHub 星标数
23
首次出现
2026 年 1 月 24 日
安全审计
安装于
codex45
opencode42
gemini-cli41
cursor40
github-copilot38
claude-code38
Apply Disney's 12 principles to any UI element for consistent, professional motion design.
Any element that responds to interaction can squash (compress on impact/press) and stretch (extend on release). Keep it subtle: 2-5% maximum for UI.
Before any significant action, a brief preparatory motion signals what's coming. Scale down before scale up, pull back before push forward. 50-100ms duration.
Direct attention to the most important element. Use contrast in motion, size, color, z-index, and blur to create clear visual hierarchy.
Pose-to-pose for most UI: define start and end states clearly. Straight-ahead for organic, flowing animations like particles or organic shapes.
Nothing stops all at once. Child elements lag behind parents. Shadows settle after objects. Stagger related elements 20-50ms apart.
The golden rule: never use linear for UI motion. Enter with ease-out, exit with ease-in, transition with ease-in-out.
Natural motion follows curved paths. Add subtle vertical movement to horizontal transitions. Rotate while translating. Avoid robotic straight lines.
Every primary action deserves supporting animation. Shadow changes, color shifts, icon rotations, glow effects reinforce without competing.
| Element Type | Fast | Normal | Slow |
|---|---|---|---|
| Micro (icons, buttons) | 50-100ms | 100-200ms | 200-300ms |
| Small (cards, inputs) | 150-200ms | 200-300ms | 300-400ms |
| Medium (modals, menus) | 200-250ms | 250-350ms | 350-500ms |
| Large (pages, overlays) | 300-400ms | 400-600ms | 600-800ms |
Match animation intensity to context. Celebratory moments allow 20-30% exaggeration. Professional contexts keep it under 10%. Error states can be more dramatic.
Maintain visual consistency: border-radius ratios, shadow directions, spacing rhythms, typography scale. Nothing should distort or break during animation.
The goal is delight without distraction. Smooth animations build trust. Snappy feedback feels responsive. The best animation is felt, not noticed.
/* Universal transition base */
* {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
/* Standard durations as custom properties */
:root {
--duration-fast: 100ms;
--duration-normal: 200ms;
--duration-slow: 350ms;
--ease-out: cubic-bezier(0.0, 0, 0.2, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
--ease-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
/* Apply to any interactive element */
.interactive {
transition: transform var(--duration-normal) var(--ease-standard),
opacity var(--duration-normal) var(--ease-standard),
box-shadow var(--duration-normal) var(--ease-standard);
}
transform: universal positioning and scalingopacity: visibility transitionstransition: state changesanimation: complex sequencesbox-shadow: depth and emphasisWeekly Installs
53
Repository
GitHub Stars
23
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex45
opencode42
gemini-cli41
cursor40
github-copilot38
claude-code38
React视图过渡API使用指南:实现原生浏览器动画与状态管理
9,100 周安装