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 的技能

Rive Animations

Timing Principle Mastery

Ux Friction

User Feedback Clarity

Straight Ahead Pose Mastery

Universal Solutions

更多Design & Creative技能

Theme Factory

Slack Gif Creator

Frontend Design

Canvas Design

Brand Guidelines

Frontend Design