重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
orchestrated-sequences by dylantarre/animation-principles
npx skills add https://github.com/dylantarre/animation-principles --skill orchestrated-sequences编排序列能够协调多个元素随时间变化的动作。如同指挥家指挥乐团,你可以控制每个元素何时入场、如何移动以及元素之间如何关联。
挤压与拉伸:统一的风格 - 所有元素应具有一致的弹性。混合弹性和僵硬的外观会显得混乱。
预备动作:错开的准备 - 主导元素首先做出预备动作,其他元素依次跟随。
舞台呈现:清晰的层次结构 - 主要动作引领,次要元素支持但不喧宾夺主。
连续动作与姿态对应:姿态对应是必需的 - 编排需要精确的时序控制。
跟随与重叠动作:级联式稳定 - 元素依次落地并带有重叠的跟随动作。
慢入慢出:共享的缓动家族 - 使用相同曲线的变体以实现凝聚力。
弧线运动:协调的路径 - 元素应沿互补方向移动,而非随机移动。
次要动作:有意的支持 - 每个元素在构图中都扮演一个角色。
时序:编排的核心 - 错开的延迟、持续时间的差异、节奏的变化。
夸张:比例上的强调 - 主要元素更夸张,次要元素则较少。
扎实的绘图:一致的维度逻辑 - 共享的透视、深度、比例关系。
吸引力:统一的表演 - 序列应感觉像一个精心编排的时刻。
/* 线性错开 - 等间隔延迟 */
.item:nth-child(n) {
transition-delay: calc(var(--index) * 50ms);
}
/* 加速错开 - 越来越快 */
.item:nth-child(1) { transition-delay: 0ms; }
.item:nth-child(2) { transition-delay: 80ms; }
.item:nth-child(3) { transition-delay: 140ms; }
.item:nth-child(4) { transition-delay: 180ms; }
/* 减速错开 - 逐渐变慢 */
.item:nth-child(1) { transition-delay: 0ms; }
.item:nth-child(2) { transition-delay: 40ms; }
.item:nth-child(3) { transition-delay: 100ms; }
.item:nth-child(4) { transition-delay: 180ms; }
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
/* 统一的家族 - 相同曲线,不同持续时间 */
.primary { transition: all 400ms cubic-bezier(0.16, 1, 0.3, 1); }
.secondary { transition: all 350ms cubic-bezier(0.16, 1, 0.3, 1); }
.tertiary { transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1); }
/* 序列曲线 - 平滑开始,自信结束 */
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
/* 错开显示系统 */
.orchestrated-item {
opacity: 0;
transform: translateY(20px);
transition: opacity 300ms ease-out,
transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.orchestrated-item.visible {
opacity: 1;
transform: translateY(0);
}
/* 通过 CSS 自定义属性或 nth-child 应用延迟 */
.orchestrated-item:nth-child(1) { transition-delay: 0ms; }
.orchestrated-item:nth-child(2) { transition-delay: 75ms; }
.orchestrated-item:nth-child(3) { transition-delay: 150ms; }
.orchestrated-item:nth-child(4) { transition-delay: 225ms; }
// 用于复杂序列的 JS 编排
const sequence = [
{ el: '.hero', delay: 0, duration: 500 },
{ el: '.title', delay: 100, duration: 400 },
{ el: '.subtitle', delay: 200, duration: 350 },
{ el: '.cta', delay: 350, duration: 400 },
];
编排是时间上的构图。正如视觉设计在空间中排列元素,动画编排则在时间中安排运动。目标是呈现一个单一、连贯的表演,而不是一系列独立的动画集合。
每周安装次数
49
代码仓库
GitHub 星标数
20
首次出现
2026年1月24日
安全审计
安装于
codex42
gemini-cli39
opencode39
cursor38
github-copilot36
claude-code32
Orchestrated sequences coordinate multiple elements across time. Like a conductor directing an orchestra, you control when each element enters, how it moves, and how elements relate.
Squash & Stretch: Unified style - all elements should share consistent elasticity. Mix bouncy and stiff looks chaotic.
Anticipation : Staggered preparation - lead element anticipates first, others follow in sequence.
Staging : Clear hierarchy - primary action leads, secondary elements support but don't compete.
Straight Ahead/Pose to Pose : Pose to pose mandatory - choreography requires precise timing control.
Follow Through : Cascading settle - elements land in sequence with overlapping follow-through.
Slow In/Slow Out : Shared easing family - use variations of same curve for cohesion.
Arcs : Coordinated paths - elements should move in complementary directions, not randomly.
Secondary Action : Intentional support - every element has a role in the composition.
Timing : The heart of orchestration - stagger delays, duration variations, tempo changes.
Exaggeration : Proportional emphasis - primary elements more exaggerated, supporting less.
Solid Drawing : Consistent dimensional logic - shared perspective, depth, scale relationships.
Appeal : Unified performance - the sequence should feel like one composed moment.
/* Linear stagger - equal delays */
.item:nth-child(n) {
transition-delay: calc(var(--index) * 50ms);
}
/* Accelerating stagger - getting faster */
.item:nth-child(1) { transition-delay: 0ms; }
.item:nth-child(2) { transition-delay: 80ms; }
.item:nth-child(3) { transition-delay: 140ms; }
.item:nth-child(4) { transition-delay: 180ms; }
/* Decelerating stagger - slowing down */
.item:nth-child(1) { transition-delay: 0ms; }
.item:nth-child(2) { transition-delay: 40ms; }
.item:nth-child(3) { transition-delay: 100ms; }
.item:nth-child(4) { transition-delay: 180ms; }
/* Cohesive family - same curve, different durations */
.primary { transition: all 400ms cubic-bezier(0.16, 1, 0.3, 1); }
.secondary { transition: all 350ms cubic-bezier(0.16, 1, 0.3, 1); }
.tertiary { transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1); }
/* Sequence curve - smooth start, confident end */
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
/* Staggered reveal system */
.orchestrated-item {
opacity: 0;
transform: translateY(20px);
transition: opacity 300ms ease-out,
transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.orchestrated-item.visible {
opacity: 1;
transform: translateY(0);
}
/* Apply delays via CSS custom properties or nth-child */
.orchestrated-item:nth-child(1) { transition-delay: 0ms; }
.orchestrated-item:nth-child(2) { transition-delay: 75ms; }
.orchestrated-item:nth-child(3) { transition-delay: 150ms; }
.orchestrated-item:nth-child(4) { transition-delay: 225ms; }
// JS orchestration for complex sequences
const sequence = [
{ el: '.hero', delay: 0, duration: 500 },
{ el: '.title', delay: 100, duration: 400 },
{ el: '.subtitle', delay: 200, duration: 350 },
{ el: '.cta', delay: 350, duration: 400 },
];
Orchestration is composition in time. Just as visual design arranges elements in space, animation orchestration arranges motion in time. The goal is a single, coherent performance, not a collection of individual animations.
Weekly Installs
49
Repository
GitHub Stars
20
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex42
gemini-cli39
opencode39
cursor38
github-copilot36
claude-code32
React视图过渡API使用指南:实现原生浏览器动画与状态管理
9,100 周安装