重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
instant-0-100ms by dylantarre/animation-principles
npx skills add https://github.com/dylantarre/animation-principles --skill instant-0-100ms100毫秒以下的动画对用户来说感觉是即时的。这个时长用于提供即时反馈,以确认操作而不会让人感觉到延迟。
挤压与拉伸:轻微 - 按钮按下时2-5%的压缩能产生触感,而不会产生可见的形变。
预备动作:完全跳过 - 在这个速度下没有时间做预备。
舞台布局:最小化 - 依赖位置/颜色变化,而非移动。
逐帧动画/姿势到姿势:仅使用逐帧动画 - 对于关键帧的复杂性来说太快了。
跟随动作:无 - 动作在跟随动作被感知之前就已完成。
慢入慢出:仅使用 ease-out - 以全速开始,轻微减速。
弧线运动:仅使用线性路径 - 在这个速度下曲线无法被感知。
次要动作:跳过 - 大脑无法同时处理多个即时变化。
时间节奏:最多1-3帧。60fps = 每帧16.67毫秒。
夸张手法:最小化 - 微妙的缩放(0.95-1.05)或不透明度变化。
扎实的描绘:专注于颜色/不透明度变化,而非空间变换。
吸引力:清晰、即时的响应能建立信任和感知性能。
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
/* 首选 - 立即开始,柔和结束 */
transition: all 50ms ease-out;
/* 备选 - 完全线性,适用于状态切换 */
transition: opacity 80ms linear;
/* 按钮按下反馈 */
transition: transform 50ms ease-out;
.button:active {
transform: scale(0.97);
transition: transform 50ms ease-out;
}
.toggle-on {
background: var(--active);
transition: background 80ms ease-out;
}
在即时速度下,动画的作用是确认,而非传达信息。用户不应该有意识地察觉到动画——他们应该感觉到界面正在响应。
每周安装量
49
代码仓库
GitHub 星标数
20
首次出现
2026年1月24日
安全审计
安装于
codex42
opencode39
gemini-cli39
cursor38
github-copilot36
claude-code34
Animations under 100ms feel instantaneous to users. This duration is for immediate feedback that confirms actions without perceived delay.
Squash & Stretch: Subtle - 2-5% compression on button press creates tactile feel without visible deformation.
Anticipation : Skip entirely - no time for preparation at this speed.
Staging : Minimal - rely on position/color change, not movement.
Straight Ahead/Pose to Pose : Straight ahead only - too fast for keyframe complexity.
Follow Through : None - motion completes before follow-through registers.
Slow In/Slow Out : Use ease-out only - starts at full speed, slight deceleration.
Arcs : Linear paths only - curves don't register at this speed.
Secondary Action : Skip - brain can't process multiple simultaneous instant changes.
Timing : 1-3 frames maximum. 60fps = 16.67ms per frame.
Exaggeration : Minimal - subtle scale (0.95-1.05) or opacity changes.
Solid Drawing : Focus on color/opacity shifts, not spatial transformation.
Appeal : Crisp, immediate response builds trust and perceived performance.
/* Primary choice - immediate start, soft landing */
transition: all 50ms ease-out;
/* Alternative - completely linear for state toggles */
transition: opacity 80ms linear;
/* Button press feedback */
transition: transform 50ms ease-out;
.button:active {
transform: scale(0.97);
transition: transform 50ms ease-out;
}
.toggle-on {
background: var(--active);
transition: background 80ms ease-out;
}
At instant speeds, animation serves confirmation , not communication. Users shouldn't consciously perceive the animation - they should feel the interface responding.
Weekly Installs
49
Repository
GitHub Stars
20
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex42
opencode39
gemini-cli39
cursor38
github-copilot36
claude-code34
前端设计系统技能:生产级UI设计、设计令牌与可访问性指南
8,500 周安装