Back to Details

css-native

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

CSS Native Animation Principles

原生CSS动画原则

Implement all 12 Disney animation principles using CSS animations, transitions, and transforms.
使用CSS动画、过渡与变换实现迪士尼全部12条动画原则。

1. Squash and Stretch

1. 挤压与拉伸

css
@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; }
css
@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. Anticipation

2. 预备动作

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

3. Staging

3. 舞台呈现

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

4. Straight Ahead / Pose to Pose

4. 逐帧动画/关键帧动画

css
/* 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; }
}
css
/* 关键帧动画 - 显式定义关键帧 */
@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. Follow Through and Overlapping Action

5. 跟随动作与重叠动作

css
.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; }
css
.character { animation: move 0.5s ease-out; }
.hair { animation: move 0.5s ease-out 0.05s; } /* 轻微延迟 */
.cape { animation: move 0.5s ease-out 0.1s; }

6. Slow In and Slow Out

6. 缓入缓出

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

7. Arc

7. 弧线运动

css
@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'); }
css
@keyframes arc-motion {
  0% { transform: translate(0, 0); }
  50% { transform: translate(100px, -80px); }
  100% { transform: translate(200px, 0); }
}
/* 使用offset-path实现真实弧线 */
.element { offset-path: path('M0,100 Q100,0 200,100'); }

8. Secondary Action

8. 次要动作

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

9. Timing

9. 时间节奏

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

10. Exaggeration

10. 夸张表现

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

11. Solid Drawing

11. 立体造型

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

12. Appeal

12. 吸引力

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

Timing Reference

时间参考

ActionDuration
Micro-interaction100-200ms
Button feedback150-300ms
Page transitions300-500ms
Complex animations500-1000ms
动作类型时长
微交互100-200ms
按钮反馈150-300ms
页面过渡300-500ms
复杂动画500-1000ms

Key CSS Properties

核心CSS属性

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