Css Native

This is a reference guide for implementing Disney's 12 principles of animation using pure CSS. You get code snippets for squash and stretch, anticipation, follow-through, arcs using offset-path, and the rest of the classic animation fundamentals. It includes timing recommendations (micro-interactions at 100-200ms, page transitions at 300-500ms) and covers the essential properties like keyframes, transforms, and cubic-bezier easing functions. Honestly, it's more of a quick lookup than a deep dive, but having all twelve principles with working CSS examples in one place beats hunting through MDN when you're trying to make a button feel less robotic or add some life to a page transition.

skills.sh installs: 760
GitHub stars: 146
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add dylantarre/animation-principles --skill css-native --agent claude-code

Installs into .claude/skills of the current project.

Files

CSS Native Animation Principles

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

1. Squash and Stretch

@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

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

3. Staging

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

4. Straight Ahead / Pose to Pose

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