home / skills / dylantarre / animation-principles / css-native
This skill helps you implement Disney's 12 animation principles using pure CSS, delivering expressive motion across interfaces.
npx playbooks add skill dylantarre/animation-principles --skill css-nativeReview the files below or copy the command above to add this skill to your agents.
---
name: css-native
description: Use when implementing Disney's 12 animation principles with pure CSS animations and transitions
---
# 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; }
```
## 2. Anticipation
```css
@keyframes anticipate-jump {
0% { transform: translateY(0); }
20% { transform: translateY(10px) scaleY(0.9); } /* wind up */
100% { transform: translateY(-100px); }
}
```
## 3. Staging
```css
.hero { z-index: 10; filter: none; }
.background { z-index: 1; filter: blur(2px); opacity: 0.7; }
```
## 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; }
}
```
## 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; }
```
## 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 */
```
## 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'); }
```
## 8. Secondary Action
```css
.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; }
```
## 10. Exaggeration
```css
@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); }
```
## 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);
}
```
## Timing Reference
| Action | Duration |
|--------|----------|
| Micro-interaction | 100-200ms |
| Button feedback | 150-300ms |
| Page transitions | 300-500ms |
| Complex animations | 500-1000ms |
## Key CSS Properties
- `animation` / `@keyframes`
- `transition`
- `transform`
- `offset-path` (motion paths)
- `animation-timing-function`
- `animation-delay`
This skill teaches how to implement Disney's 12 animation principles using only CSS animations, transitions, transforms, and motion paths. It provides practical patterns and code-ready techniques to make UI motion feel lively, readable, and professionally timed. Use it to translate classic animation theory into performant, CSS-native micro-interactions and character-like motions.
The skill maps each Disney principle to compact CSS patterns: keyframes for squash-and-stretch, offsets and offset-path for arcs, staggered delays for follow-through, and easing curves for slow-in/slow-out. It recommends property choices (transform, opacity, filter, animation-timing-function) and timing guidelines so you can pick durations and delays that match the intended weight and mood. Examples show how to combine these primitives for buttons, characters, and scene staging without JavaScript.
Will pure CSS cover complex character animation?
CSS can handle many character-style motions (walk cycles, jumps, follow-through) using keyframes, transforms, and offsets. For highly detailed rigs or physics-driven motion, combine CSS with JS for control.
How do I keep animations performant?
Animate transform and opacity only, use will-change sparingly, limit simultaneous animated elements, and prefer hardware-accelerated properties and simple keyframe counts.