What is the css-native skill?
The css-native skill is a SKILL.md from dylantarre's animation-principles collection that implements all 12 Disney animation principles with pure CSS animations, transitions and transforms. It has one snippet per principle, a timing reference from 100ms micro-interactions to 1000ms complex animation, and a key properties list.
The css-native skill implements all 12 of Disney's animation principles with pure CSS. It needs no animation library: each principle gets a short snippet built from keyframes, transitions, transforms and, for arcs, offset-path.
CSS techniques it shows
- Squash and stretch: a keyframe that scales to 1.2 on X and 0.8 on Y at the midpoint.
- Anticipation: a wind-up keyframe at 20% before the jump.
- Follow through: the same animation on a hair element at 0.05s delay and a cape at 0.1s.
- Slow in and slow out: a transition using cubic-bezier(0.42, 0, 0.58, 1).
- Arc: a translate keyframe with an offset-path example for true arcs.
Timing reference
A table lists micro-interactions at 100 to 200ms, button feedback at 150 to 300ms, page transitions at 300 to 500ms and complex animations at 500 to 1000ms. The Timing snippet also defines a dramatic duration of 1.2s.
Who the css-native skill is for
Best for
- Implementing the 12 animation principles with CSS animations and transitions.
- Projects that want motion without a JavaScript animation library.
Not for
- Browser animation in JavaScript or frameworks, which the web-motion-design skill covers.
- Reduced motion alternatives, which the accessible-motion skill covers.
- Slow or janky animation, which the fixing-motion-performance skill diagnoses.
How to install CSS Native Skill: 12 Animation Principles in Pure CSS
git clone https://github.com/dylantarre/animation-principles.git ~/.claude/plugins/animation-principlesOption one, the plugin
Open your Claude Code settings and list
animation-principles@github:dylantarre/animation-principlesunder plugins to load it as a plugin.Option two, a manual clone
Run
git clone https://github.com/dylantarre/animation-principles.git ~/.claude/plugins/animation-principles. This is the manual installation.Locate the folder
Inside the clone the skill is at skills/09-by-tool-framework/css-native.
Trigger it
Describe the job in the terms from its description: implement Disney's 12 animation principles with pure CSS animations and transitions.
Check that it loaded
Ask the agent to add a bounce with anticipation to a button in plain CSS. It should return keyframes with a wind-up step and a timing near the reference table.
Key features
- One snippet per principleAll 12 principles are numbered, each with a short CSS example you can adapt.
- Squash and stretch keyframesA 0.3s ease-in-out animation scales between 1x1 and 1.2x0.8 at the midpoint.
- Anticipation wind-upA jump keyframe dips 10px with scaleY(0.9) at 20% before moving to -100px.
- Staging with layersA hero sits at z-index 10 with no filter, while the background has z-index 1, blur(2px) and 0.7 opacity.
- Follow-through delaysA character, hair and cape share one animation, offset by 0.05s and 0.1s.
- Arc with offset-pathA translate keyframe curves through 100px and -80px, and an offset-path of M0,100 Q100,0 200,100 draws a true arc.
- Exaggerated bounceA -150px jump with a scale of 0.8 by 1.3 shows exaggeration in one keyframe.
- Solid drawing in 3Dpreserve-3d and a 1000px perspective with a rotateY(20deg) face show volume.
- Timing reference tableFour action types map to durations from 100 to 200ms up to 500 to 1000ms.
- Key properties listAnimation, keyframes, transition, transform, offset-path, animation-timing-function and animation-delay.
Frequently asked questions
What is the css-native skill?
It is a skill in dylantarre's animation-principles collection that implements all 12 Disney animation principles with pure CSS. It supplies a keyframe, transition or transform snippet for each principle, a timing reference table and a list of the key CSS properties for an AI coding agent.
How do I install css-native?
Add animation-principles@github:dylantarre/animation-principles to the plugins list in your Claude Code settings, or clone the dylantarre/animation-principles repository into ~/.claude/plugins/animation-principles. The skill folder is skills/09-by-tool-framework/css-native inside the clone. Then ask for a CSS animation based on Disney's principles, and the agent can load the skill.
Which CSS properties does the skill rely on?
The key properties are animation with @keyframes, transition, transform, offset-path for motion paths, animation-timing-function and animation-delay. Other snippets also use z-index, filter, opacity, perspective, transform-style preserve-3d, box-shadow and border-radius for staging, solid drawing and appeal, and the Timing snippet sets animation-duration.
How does the skill handle arcs?
It shows two routes. A keyframe animation moves through translate(0, 0), translate(100px, -80px) and translate(200px, 0) at 0%, 50% and 100%, which bends the path. For a true arc it uses offset-path with a path such as M0,100 Q100,0 200,100.
What durations does the skill suggest?
Its reference table sets micro-interactions at 100 to 200ms, button feedback at 150 to 300ms, page transitions at 300 to 500ms and complex animations at 500 to 1000ms. The Timing snippet defines animation-duration classes of 0.15s, 0.3s, 0.6s and a dramatic 1.2s.
How is follow-through done in CSS?
The same animation runs on several elements with small delays. In the example a character uses move 0.5s ease-out, the hair uses the same animation with a 0.05s delay and the cape uses 0.1s, so the trailing parts finish slightly after the main body.
What license does the css-native skill use?
It is MIT licensed. The dylantarre/animation-principles repository, which holds the css-native skill alongside 143 other skills, carries the MIT license, and its README points to the LICENSE file for details. The repository badge also shows the license as MIT, and GitHub lists it as MIT License.