重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
deliberate-1200-2000ms by dylantarre/animation-principles
npx skills add https://github.com/dylantarre/animation-principles --skill deliberate-1200-2000ms在 1200-2000 毫秒的区间内,你是在创造体验,而非界面。这个时长适用于那些真正以动画本身为内容的故事讲述时刻。
挤压与拉伸:定义角色特性 - 30-40% 的形变能创造出个性。物体由此成为角色。
预备动作:完整的戏剧性准备 - 300-400 毫秒的蓄力动作能制造紧张感和期待。
演出布局:场景调度 - 思考电影摄影。先建立镜头,再处理细节。确保清晰的叙事流程。
逐帧动画/姿势到姿势:必须采用姿势到姿势法 - 6-10 个关键姿势定义叙事弧线。
跟随动作:延长的缓冲 - 主要动作完成后,有 300-500 毫秒的次要动作。
慢入慢出:叙事节奏 - 缓动曲线讲述情感故事。急促的开始意味着紧迫,柔和的结束意味着解决。
弧形运动:精心编排的路径 - 运动路径是设计出来的,而非默认。每个元素的轨迹都为整体构图服务。
次要动作:完整的生态系统 - 主要、次要、第三级和环境动作协同工作。
时间掌握:在 60fps 下为 72-120 帧。达到动画品质的帧数。
夸张:情感放大 - 追求感觉,而不仅仅是运动。
扎实的绘图:立体叙事 - 视差、深度、透视变化创造出空间感。
吸引力:深层的情感投入 - 用户在这些动画中能感受到某些东西。
/* 叙事弧线 - 开始、中间、结束 */
animation-timing-function: cubic-bezier(0.34, 0, 0.14, 1);
/* 优雅、深思熟虑的运动 */
transition: all 1500ms cubic-bezier(0.16, 1, 0.3, 1);
/* 积聚动量 */
transition: all 1800ms cubic-bezier(0.65, 0, 0.35, 1);
/* 弹性叙事 */
transition: transform 1600ms cubic-bezier(0.68, -0.6, 0.32, 1.6);
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
@keyframes appLaunch {
0% {
opacity: 0;
transform: scale(0.6) translateY(50px);
filter: blur(10px);
}
30% {
opacity: 1;
filter: blur(5px);
}
60% {
transform: scale(1.02) translateY(-10px);
filter: blur(0);
}
80% {
transform: scale(0.99) translateY(5px);
}
100% {
transform: scale(1) translateY(0);
}
}
.app-launch {
animation: appLaunch 1800ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
精心设计的动画是品牌投资。它们不仅仅是展示发生了什么 - 它们让用户感受到某些东西。为设计、迭代和测试预留资源。这些时刻定义了感知质量。
每周安装数
63
代码仓库
GitHub 星标数
32
首次出现
2026年1月24日
安全审计
安装于
codex56
opencode53
gemini-cli53
cursor53
github-copilot50
cline46
At 1200-2000ms, you're creating experiences, not interfaces. This duration is for moments of genuine storytelling where animation itself is the content.
Squash & Stretch: Character-defining - 30-40% deformation creates personality. Objects become characters.
Anticipation : Full dramatic preparation - 300-400ms wind-up creates tension and expectation.
Staging : Scene direction - think cinematography. Establish shot, then detail. Clear narrative flow.
Straight Ahead/Pose to Pose : Pose to pose mandatory - 6-10 key poses define the narrative arc.
Follow Through : Extended settling - 300-500ms of secondary motion after primary completes.
Slow In/Slow Out : Narrative pacing - ease curves tell emotional stories. Sharp starts mean urgency, soft ends mean resolution.
Arcs : Orchestrated paths - motion paths are designed, not default. Each element's trajectory contributes to composition.
Secondary Action : Full ecosystem - primary, secondary, tertiary, ambient all working together.
Timing : 72-120 frames at 60fps. Animation-quality frame counts.
Exaggeration : Emotional amplification - push for feeling, not just movement.
Solid Drawing : Dimensional storytelling - parallax, depth, perspective shifts create space.
Appeal : Deep emotional engagement - users feel something during these animations.
/* Narrative arc - beginning, middle, end */
animation-timing-function: cubic-bezier(0.34, 0, 0.14, 1);
/* Graceful, considered motion */
transition: all 1500ms cubic-bezier(0.16, 1, 0.3, 1);
/* Building momentum */
transition: all 1800ms cubic-bezier(0.65, 0, 0.35, 1);
/* Elastic storytelling */
transition: transform 1600ms cubic-bezier(0.68, -0.6, 0.32, 1.6);
@keyframes appLaunch {
0% {
opacity: 0;
transform: scale(0.6) translateY(50px);
filter: blur(10px);
}
30% {
opacity: 1;
filter: blur(5px);
}
60% {
transform: scale(1.02) translateY(-10px);
filter: blur(0);
}
80% {
transform: scale(0.99) translateY(5px);
}
100% {
transform: scale(1) translateY(0);
}
}
.app-launch {
animation: appLaunch 1800ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
Deliberate animations are brand investments. They don't just show what's happening - they make users feel something. Budget for design, iteration, and testing. These moments define perceived quality.
Weekly Installs
63
Repository
GitHub Stars
32
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex56
opencode53
gemini-cli53
cursor53
github-copilot50
cline46
前端设计系统技能:生产级UI设计、设计令牌与可访问性指南
8,500 周安装