Css Native

dylantarre/animation-principles/skills/09-by-tool-framework/css-native

作者 dylantarre83597134ba8f无许可证99 个星标收录于 2026年10月8日更新于 2026年10月8日仓库9个月前更新

Use when implementing Disney's 12 animation principles with pure CSS animations and transitions

仅含说明Design & Creative Software Development

AI 生成的概览

用纯 CSS 动画、过渡和变换实现迪士尼 12 项动画原则的参考指南。

功能: 该技能为迪士尼 12 项动画原则分别提供 CSS 代码片段，包括挤压与拉伸、预备动作、舞台调度、时间控制和吸引力等。它还包含时间参考表和 animation、transition、transform、offset-path 等相关 CSS 属性列表。产出的是可直接复制的 CSS 示例，而不是生成的文件或脚本。
适用场景: 适用于用纯 CSS 为网页界面添加动效，并希望效果遵循经典动画原则的场景。也适合需要弹跳、跟随动作或弧线等具体关键帧或过渡示例的情况。
运行要求: 无需任何工具、软件包或凭据；该技能仅为说明和 CSS 片段，不附带脚本。

CSS Native Animation Principles

Implement all 12 Disney animation principles using CSS animations, transitions, and transforms.

1. Squash and Stretch

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

@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

css

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

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

3. Staging

4. Straight Ahead / Pose to Pose

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

/* 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. Follow Through and Overlapping Action

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

.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. Slow In and Slow Out

css

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

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

7. Arc

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

@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. Secondary Action

css

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

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

9. Timing

css

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

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

10. Exaggeration

css

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

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

11. Solid Drawing

css

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

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

12. Appeal

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

.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

Key CSS Properties

animation / @keyframes
transition
transform
offset-path (motion paths)
animation-timing-function
animation-delay

来源与署名

来源：dylantarre/animation-principles位于skills/09-by-tool-framework/css-native提交8359713

许可证：无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

Action	Duration
Micro-interaction	100-200ms
Button feedback	150-300ms
Page transitions	300-500ms
Complex animations	500-1000ms

Css Native

CSS Native Animation Principles

1. Squash and Stretch

2. Anticipation

3. Staging

4. Straight Ahead / Pose to Pose

5. Follow Through and Overlapping Action

6. Slow In and Slow Out

7. Arc

8. Secondary Action

9. Timing

10. Exaggeration

11. Solid Drawing

12. Appeal

Timing Reference

Key CSS Properties

来源与署名

更多来自 dylantarre/animation-principles 的技能

Lottie Bodymovin

Framer Motion

Rive Animations

Timing Principle Mastery

Ux Friction

User Feedback Clarity

更多Design & Creative技能

Theme Factory

Slack Gif Creator

Frontend Design

Canvas Design

Brand Guidelines

Frontend Design