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.

Install to Claude Code

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