Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

CSS Native Animations (css-native)

A zero-dependency playbook for modern CSS animation: scroll-driven timelines, View Transitions, @starting-style and anchor positioning.

Design & UIIntermediate★ 457⑂ 34AI score 9/10Last updated: Oct 5, 2026

What it does

  • Gives a decision table for CSS-native vs library: fewer than 3 animations, scroll reveals, tooltips and page transitions stay in CSS; 5+ step timelines, interruptible springs and SVG morphs go to GSAP/Framer Motion.
  • Ships ready-to-paste snippets for animation-timeline: scroll()/view(), animation-range, the View Transitions API (same-document and cross-document), @starting-style with allow-discrete, anchor positioning with @position-try, and container-query-driven animations.
  • Includes visual-effect recipes: clip-path reveals, backdrop-filter glass, mix-blend-mode, mesh and conic gradients.
  • A "Do Not" table blocks common mistakes: no transition: all, no animating layout properties, always gate scroll-driven animations behind @supports, always define position fallbacks.

Who it's for

  • Front-end developers trimming animation libraries out of their bundle.
  • Designers/web builders adding scroll reveals and page transitions to landing pages.
  • Claude Code users who want generated CSS to use current, correctly-gated syntax.

Examples

  1. "Build a scroll progress bar with pure CSS" → scroll(root block) timeline plus the @supports fallback for Firefox.
  2. "Make the card image morph into the detail hero on navigation" → shared view-transition-name with @view-transition { navigation: auto; }.
  3. "Animate a dialog in from display: none" → @starting-style + transition-behavior: allow-discrete, no JS timing hacks.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/AThevon/genjutsu/HEAD/skills/_jutsu/css-native/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the skills/_jutsu/css-native folder from the GitHub repo AThevon/genjutsu into my ~/.claude/skills/css-native/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/AThevon/genjutsu.git /tmp/genjutsu && mkdir -p ~/.claude/skills && cp -r /tmp/genjutsu/skills/_jutsu/css-native ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal.
  2. Clone the repository: git clone https://github.com/AThevon/genjutsu.git
  3. Create the skills folder: mkdir -p ~/.claude/skills
  4. Copy the skill: cp -r genjutsu/skills/_jutsu/css-native ~/.claude/skills/
    • Make sure the references/modern-css.md deep-dive file came along.
  5. Restart Claude Code and try a prompt like "use the css-native skill to add a scroll reveal".
  6. Note this is an internal sub-skill of the genjutsu bundle — for the full experience, follow the repo README to install the whole bundle. Re-verify browser-support claims (dated 2026-09-08) before shipping.
View source on GitHub ↗License: NOASSERTION