重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
universal-patterns by dylantarre/animation-principles
npx skills add https://github.com/dylantarre/animation-principles --skill universal-patterns将迪士尼的 12 条动画原则作为任何动画的基线默认设置。
| 类别 | 时长 | 用途 |
|---|---|---|
| 即时 | 100-150ms | 悬停、切换、微状态 |
| 快速 | 150-250ms | 反馈、小过渡 |
| 标准 | 250-400ms | 模态框、显示、状态变化 |
| 慢速 | 400-600ms | 页面过渡、序列 |
| 刻意 | 600-1000ms | 戏剧性展示、庆祝 |
:root {
/* 标准缓动函数 */
--ease-out: cubic-bezier(0, 0, 0.2, 1); /* 进入动画 */
--ease-in: cubic-bezier(0.4, 0, 1, 1); /* 退出动画 */
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* 状态变化 */
/* 弹簧缓动函数 */
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* 过冲效果 */
--ease-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55); /* 弹跳效果 */
}
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
/* 标准进入动画 */
.animate-in {
animation: fade-in 250ms var(--ease-out) forwards;
}
/* 标准退出动画 */
.animate-out {
animation: fade-out 200ms var(--ease-in) forwards;
}
/* 状态过渡动画 */
.animate-state {
transition: all 200ms var(--ease-in-out);
}
@keyframes fade-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-out {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(-10px); }
}
prefers-reduced-motion 替代方案transform 和 opacity 以实现流畅的 60fps@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
不确定时,从以下开始:250ms cubic-bezier(0.4, 0, 0.2, 1)
每周安装量
53
代码仓库
GitHub 星标数
20
首次出现
2026年1月24日
安全审计
安装于
codex46
gemini-cli43
opencode43
cursor42
github-copilot39
claude-code38
Apply Disney's 12 principles as baseline defaults for any animation.
| Category | Duration | Use For |
|---|---|---|
| Instant | 100-150ms | Hovers, toggles, micro-states |
| Fast | 150-250ms | Feedback, small transitions |
| Standard | 250-400ms | Modals, reveals, state changes |
| Slow | 400-600ms | Page transitions, sequences |
| Deliberate | 600-1000ms | Dramatic reveals, celebrations |
:root {
/* Standard easings */
--ease-out: cubic-bezier(0, 0, 0.2, 1); /* Entrances */
--ease-in: cubic-bezier(0.4, 0, 1, 1); /* Exits */
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* State changes */
/* Spring easings */
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Overshoot */
--ease-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Playful */
}
/* Standard entrance */
.animate-in {
animation: fade-in 250ms var(--ease-out) forwards;
}
/* Standard exit */
.animate-out {
animation: fade-out 200ms var(--ease-in) forwards;
}
/* State transition */
.animate-state {
transition: all 200ms var(--ease-in-out);
}
@keyframes fade-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-out {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(-10px); }
}
prefers-reduced-motion alternativetransform and opacity for smooth 60fps@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
When uncertain, start with: 250ms cubic-bezier(0.4, 0, 0.2, 1)
Weekly Installs
53
Repository
GitHub Stars
20
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex46
gemini-cli43
opencode43
cursor42
github-copilot39
claude-code38
前端设计系统技能:生产级UI设计、设计令牌与可访问性指南
8,500 周安装
Everything Claude Code (ECC) - AI智能体性能优化系统 | 生产就绪开发工具
1,100 周安装
TUI组件设计模式:Bubbletea v2构建可维护终端界面的最佳实践
45 周安装
UI/UX Pro Max - 智能设计助手:配色、字体、图表与最佳实践数据库
1,100 周安装
UX启发式框架:10个可用性原则评估界面,提升用户体验设计
1,300 周安装
艺术家工作区搭建指南 - 快速创建智能体工作环境与目录结构
1,100 周安装
AI智能体电子邮件收件箱搭建指南:使用Resend Webhook实现安全实时邮件处理
1,100 周安装