用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/dylantarre/animation-principles --skill css-native命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Use when working in Blender, Unity 3D, Unreal Engine, Cinema 4D, VR/AR applications, or any three-dimensional animation work.
Use when implementing reduced motion alternatives, vestibular-safe animations, WCAG compliance, or designing for users with motion sensitivity.
Use when creating commercial animations, advertising motion, brand identity animation, logo reveals, or marketing video content.
基于 SOC 职业分类
正在显示 SKILL.md
| name | css-native |
| description | Use when implementing Disney's 12 animation principles with pure CSS animations and transitions |
Implement all 12 Disney animation principles using CSS animations, transitions, and transforms.
@keyframes squash-stretch {
0%, 100% { transform: scaleX(1) scaleY(1); }
50% { transform: scaleX(1.2) scaleY(0.8); }
}
.ball { animation: squash-stretch 0.3s ease-in-out; }
@keyframes anticipate-jump {
0% { transform: translateY(0); }
20% { transform: translateY(10px) scaleY(0.9); } /* wind up */
100% { transform: translateY(-100px); }
}
.hero { z-index: 10; filter: none; }
.background { z-index: 1; filter: blur(2px); opacity: 0.7; }
/* Pose to pose - define keyframes explicitly */
@keyframes walk-cycle {
0% { background-position: 0 0; }
25% { background-position: -100px 0; }
50% { background-position: -200px 0; }
75% { background-position: -300px 0; }
100% { background-position: -400px 0; }
}
.character { animation: move 0.5s ease-out; }
.hair { animation: move 0.5s ease-out 0.05s; } /* slight delay */
.cape { animation: move 0.5s ease-out 0.1s; }
.element {
transition: transform 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}
/* Or use: ease-in-out, ease-in, ease-out */
@keyframes arc-motion {
0% { transform: translate(0, 0); }
50% { transform: translate(100px, -80px); }
100% { transform: translate(200px, 0); }
}
/* Use offset-path for true arcs */
.element { offset-path: path('M0,100 Q100,0 200,100'); }
.button:hover {
transform: scale(1.05);
}
.button:hover .icon {
animation: wiggle 0.3s ease-in-out;
}
.fast { animation-duration: 0.15s; }
.normal { animation-duration: 0.3s; }
.slow { animation-duration: 0.6s; }
.dramatic { animation-duration: 1.2s; }
@keyframes exaggerated-bounce {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-150px) scale(0.8, 1.3); }
}
.element {
transform-style: preserve-3d;
perspective: 1000px;
}
.face { transform: rotateY(20deg); }
.appealing {
border-radius: 50%;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.appealing:hover {
transform: scale(1.02);
box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}
| Action | Duration |
|---|---|
| Micro-interaction | 100-200ms |
| Button feedback | 150-300ms |
| Page transitions | 300-500ms |
| Complex animations | 500-1000ms |
animation / @keyframestransitiontransformoffset-path (motion paths)animation-timing-functionanimation-delay