重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
continuous-loops by dylantarre/animation-principles
npx skills add https://github.com/dylantarre/animation-principles --skill continuous-loops将迪士尼的 12 条动画原则应用于永不停止的动画。
挤压与拉伸:微妙的缩放振荡(0.98-1.02)能创造出有机的呼吸感。避免僵硬的机械循环。
预备动作:将预备动作融入循环周期中。在反转方向之前,在动作极端点有短暂的停顿。
演出布局:循环应起到辅助作用,而非主导。对于背景元素,保持振幅微妙。
逐帧动画与关键帧动画:设计能无缝循环的关键帧姿势。结束帧必须能流畅地过渡到起始帧。
跟随与重叠动作:多部分循环中的元素处于不同的相位。三个圆点以 120 度的相位差进行脉动。
慢入慢出:使用缓入缓出效果来实现平滑的振荡。线性运动会显得机械。
弧线运动:圆周运动遵循真实的弧线。旋转器旋转,钟摆摆动,轨道环绕。
次要动作:主要旋转 + 次要晃动。旋转器在旋转的同时轻微弹跳。
节奏:
夸张:对于循环动画,夸张应最小化——它们本身已经通过重复来吸引注意力。
扎实的描绘:循环必须是无缝的。结束帧和起始帧之间的任何跳跃都会破坏错觉。
吸引力:循环应该是催眠的,而不是恼人的。测试 30 秒——仍然令人愉快吗?
| 循环类型 | 持续时间 | 缓动函数 |
|---|
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 迭代次数 |
|---|
| 旋转器 | 600-800 毫秒 | linear(旋转) | infinite |
| 脉动 | 1500-2000 毫秒 | ease-in-out | infinite |
| 骨架闪烁 | 1500 毫秒 | ease-in-out | infinite |
| 打字圆点 | 1400 毫秒 | ease-in-out | infinite |
| 呼吸 | 3000-4000 毫秒 | ease-in-out | infinite |
| 漂浮 | 3000-5000 毫秒 | ease-in-out | infinite |
/* 平滑旋转器 */
.spinner {
animation: spin 700ms linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* 有机脉动 */
.pulse {
animation: pulse 2000ms ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.05); opacity: 0.8; }
}
/* 错开显示的圆点 */
.dot {
animation: bounce 1400ms ease-in-out infinite;
}
.dot:nth-child(2) { animation-delay: 160ms; }
.dot:nth-child(3) { animation-delay: 320ms; }
transform 和 opacity —— 不要使用布局属性will-change: transformprefers-reduced-motion —— 减少或停止循环对于呼吸/脉动效果:0% 和 100% 的关键帧必须完全相同。使用 alternate 方向可以实现更简单的乒乓效果。
每周安装量
52
代码仓库
GitHub 星标数
23
首次出现
2026年1月24日
安全审计
安装于
codex45
gemini-cli42
opencode42
cursor41
github-copilot39
claude-code37
Apply Disney's 12 principles to animations that never stop.
Squash & Stretch: Subtle scale oscillation (0.98-1.02) creates organic breathing. Avoid rigid mechanical loops.
Anticipation : Build anticipation into the loop cycle. Brief pause at extremes before reversing.
Staging : Loops should support, not dominate. Keep amplitude subtle for background elements.
Straight Ahead vs Pose-to-Pose : Design keyframe poses that loop seamlessly. End frame must flow into start frame.
Follow Through & Overlapping: Multi-part loops have elements at different phases. Three dots pulse with 120° phase offset.
Slow In/Slow Out : Use ease-in-out for smooth oscillations. Linear motion looks mechanical.
Arcs : Circular motion follows true arcs. Spinners rotate, pendulums swing, orbits circle.
Secondary Action : Primary rotation + secondary wobble. Spinner spins while slightly bouncing.
Timing :
Exaggeration : Minimal for loops - they're already attention-grabbing through repetition.
Solid Drawing : Loops must be seamless. Any jump between end and start destroys the illusion.
Appeal : Loops should be hypnotic, not annoying. Test at 30 seconds - still pleasant?
| Loop Type | Duration | Easing | Iterations |
|---|---|---|---|
| Spinner | 600-800ms | linear (rotation) | infinite |
| Pulse | 1500-2000ms | ease-in-out | infinite |
| Skeleton Shimmer | 1500ms | ease-in-out | infinite |
| Typing Dots | 1400ms | ease-in-out | infinite |
| Breathing | 3000-4000ms | ease-in-out | infinite |
| Floating | 3000-5000ms | ease-in-out | infinite |
/* Smooth spinner */
.spinner {
animation: spin 700ms linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Organic pulse */
.pulse {
animation: pulse 2000ms ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.05); opacity: 0.8; }
}
/* Staggered dots */
.dot {
animation: bounce 1400ms ease-in-out infinite;
}
.dot:nth-child(2) { animation-delay: 160ms; }
.dot:nth-child(3) { animation-delay: 320ms; }
transform and opacity only - no layout propertieswill-change: transform for loops over 1 secondprefers-reduced-motion - reduce or stop loopsFor breathing/pulsing: 0%, 100% keyframes must be identical. Use alternate direction for simpler ping-pong effects.
Weekly Installs
52
Repository
GitHub Stars
23
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex45
gemini-cli42
opencode42
cursor41
github-copilot39
claude-code37
Tailwind CSS 高级设计系统教程 - 使用@theme构建企业级设计令牌与样式指南
447 周安装