mcpField
C
css-native

css-native

github.com/dylantarre设计与 UI134722 次安装43 周前更新
代码仓库

关于 css-native

css-native 是一份 CSS 动画设计技能指南，面向制作界面动效的设计师和开发者。它将迪士尼 12 条动画原则对应到 CSS 属性与示例，并提供常见动画时长参考。

主要功能

  1. 01将 12 条动画原则用于 CSS
  2. 02提供关键帧与过渡示例
  3. 03涵盖变换与运动路径
  4. 04列出常见动画时长参考

适用场景

  1. 01为角色动画设计挤压与伸展
  2. 02为按钮添加悬停次级动作
  3. 03规划元素移动的缓动和时长

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/dylantarre/animation-principles --skill css-native

安装后在 Claude Code 中输入/css-native确认已加载。

详细介绍

CSS 原生动画原则

使用 CSS 动画、过渡和变换实现迪士尼动画的全部 12 条原则。

1. 挤压与拉伸

@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; }

2. 预备动作

@keyframes anticipate-jump {
  0% { transform: translateY(0); }
  20% { transform: translateY(10px) scaleY(0.9); } /* wind up */
  100% { transform: translateY(-100px); }
}

3. 演出布局

.hero { z-index: 10; filter: none; }
.background { z-index: 1; filter: blur(2px); opacity: 0.7; }

4. 连续动作 / 姿势到姿势

/* 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; }
}

5. 跟随动作与重叠动作

.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; }

6. 慢入与慢出

.element {
  transition: transform 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}
/* Or use: ease-in-out, ease-in, ease-out */

7. 弧线运动

@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'); }

8. 次要动作

.button:hover {
  transform: scale(1.05);
}
.button:hover .icon {
  animation: wiggle 0.3s ease-in-out;
}

9. 时间控制

.fast { animation-duration: 0.15s; }
.normal { animation-duration: 0.3s; }
.slow { animation-duration: 0.6s; }
.dramatic { animation-duration: 1.2s; }

10. 夸张

@keyframes exaggerated-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-150px) scale(0.8, 1.3); }
}

11. 扎实绘制

.element {
  transform-style: preserve-3d;
  perspective: 1000px;
}
.face { transform: rotateY(20deg); }

12. 吸引力

.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);
}

时间参考

动作时长
微交互100-200ms
按钮反馈150-300ms
页面过渡300-500ms
复杂动画500-1000ms

关键 CSS 属性

  • animation / @keyframes
  • transition
  • transform
  • offset-path（运动路径）
  • animation-timing-function
  • animation-delay

评论

支持 Markdown