Summary
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-codeInstalls into .claude/skills of the current project.
Keep your Mac awake while Claude Code and 40+ AI agents run. Sleeps when they're idle.
One time payment $9 →
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →
Files
SKILL.md
Select a file.
Featured
Keep your Mac awake while Claude Code and 40+ AI agents run. Sleeps when they're idle.
One time payment $9 →Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →
