Css Native

AThevon/genjutsu/skills/_jutsu/css-native

by AThevon1f518a71378b15d423389e546e767cffc86e14c3No license431 starsListed Oct 9, 2026Updated Oct 9, 2026Repository updated 3 days ago

Zero-dependency animations and visual techniques - scroll-driven, View Transitions, @starting-style, modern CSS.

Instructions onlySoftware DevelopmentDesign & Creative
AI-generated overview

Reference guide for zero-dependency CSS animations and modern visual techniques.

What it does
This skill is an instruction-only reference covering native CSS animation and visual techniques, including scroll-driven animations, the View Transitions API, @starting-style, anchor positioning, container queries, clip-path transitions, backdrop-filter, blend modes and gradients. It provides decision guidance on when to use native CSS versus animation libraries, code patterns, and a list of practices to avoid. A companion reference file holds browser-support tables, fallback patterns and progressive-enhancement notes.
When to use it
Use it when implementing animations or visual effects in a web interface and deciding whether native CSS is sufficient. It suits scroll-driven reveals, enter/exit transitions from display: none, tooltip and popover positioning, and page transitions. It is also useful when checking fallbacks and browser-support caveats for these features.
Requirements
No scripts or packages; the skill is instructions only. It assumes a web project with HTML and CSS, and the agent may need to read the bundled reference file. Some techniques require modern browser support, and the document notes that version claims were verified on a specific date and should be re-verified.

Version-sensitive. Every API name, SDK gate and browser-support claim below was verified on 2026-09-08 against primary sources. What against, and when, is in _jutsu/VERSIONS.md. If that date is old, re-verify before acting on a version number.

CSS Native - Zero-Dependency Animations & Visual Techniques

When to Use CSS Native vs Library

SituationDecision
< 3 animations on the pageCSS native
Scroll-driven reveal/parallaxCSS native (animation-timeline), always inside @supports (animation-timeline: scroll()) with the content visible by default - no Firefox release support
Enter/exit from display: noneCSS native (@starting-style + transition-behavior: allow-discrete)
Tooltip/popover positioningCSS native (anchor positioning)
Page transitions (MPA or SPA)CSS native (View Transitions API)
Complex multi-step timeline (5+ tweens)GSAP
Stagger across dynamic list (unknown count)CSS native (animation-delay: calc(sibling-index() * 60ms)), Baseline since Aug 2026. Reach for a library only if the stagger has to be interrupted or re-sequenced at runtime
Physics-based spring with interruptionFramer Motion
Morph between SVG shapesGSAP MorphSVG

Rule of thumb: if you can express it in a @keyframes + one animation-timeline, stay in CSS. The moment you need imperative control, sequence coordination, or runtime values - reach for a library.

Scroll-Driven Animations

Scroll Progress Timeline

Animate based on scroll position of a container.

css
.progress-bar {  animation: grow-width linear both;  animation-timeline: scroll(root block);}
@keyframes grow-width {  from { transform: scaleX(0); }  to   { transform: scaleX(1); }}
  • scroll(<scroller> <axis>) - scroller: nearest | root | self, axis: block | inline | x | y
  • Default: scroll(nearest block)

View Progress Timeline

Animate as an element enters/exits the scrollport.

css
.reveal {  animation: fade-in linear both;  animation-timeline: view();  animation-range: entry 0% entry 100%;}
@keyframes fade-in {  from { opacity: 0; transform: translateY(2rem); }  to   { opacity: 1; transform: translateY(0); }}

animation-range

Controls which segment of the timeline drives the animation.

css
/* Named ranges: cover | contain | entry | exit | entry-crossing | exit-crossing */animation-range: entry 0% entry 100%;    /* animate during entry only */animation-range: contain 0% contain 100%; /* animate while fully visible */animation-range: entry 25% exit 75%;      /* custom start/end */

Use the Scroll-driven Animations tool to visualize ranges interactively.

View Transitions API

Same-Document (SPA)

js
document.startViewTransition(() => {  // Update the DOM synchronously  updateContent();});
css
/* Control the transition animation */::view-transition-old(root) {  animation: fade-out 200ms ease-out;}::view-transition-new(root) {  animation: fade-in 300ms ease-in;}
/* Named transitions for specific elements */.hero-image { view-transition-name: hero; }
::view-transition-group(hero) {  animation-duration: 400ms;  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);}

Cross-Document (MPA)

css
/* Both pages need this */@view-transition { navigation: auto; }
/* Outgoing page */.card { view-transition-name: card-detail; }
/* Incoming page */.detail-hero { view-transition-name: card-detail; }

view-transition-class (group styling)

css
.card { view-transition-class: card; }
::view-transition-group(*.card) {  animation-duration: 350ms;  animation-timing-function: var(--ease-spring);}

@starting-style

Native enter animations from display: none - no JS timing hacks.

css
.dialog {  opacity: 1;  transform: translateY(0);  transition: opacity 300ms ease, transform 300ms ease,              display 300ms allow-discrete;
  @starting-style {    opacity: 0;    transform: translateY(-1rem);  }}
.dialog[hidden] {  opacity: 0;  transform: translateY(-1rem);  display: none;}

Key rules:

  • transition-behavior: allow-discrete (or shorthand allow-discrete in the transition) enables transitioning display and overlay
  • @starting-style block defines the "from" state when the element first renders
  • Combine with [popover] and <dialog> for native modals with zero JS animation code

Anchor Positioning

CSS-native positioning of tooltips, popovers, and floating UI relative to a trigger.

css
.trigger {  anchor-name: --my-trigger;}
.tooltip {  position: fixed;  position-anchor: --my-trigger;  position-area: top center;  margin-bottom: 0.5rem;
  /* Fallback if no space on top */  position-try-fallbacks: --bottom;}
@position-try --bottom {  position-area: bottom center;  margin-top: 0.5rem;}

Combine with @starting-style for animated tooltips:

css
.tooltip[popover]:popover-open {  opacity: 1;  transform: scale(1);  transition: opacity 150ms ease, transform 150ms ease,              display 150ms allow-discrete, overlay 150ms allow-discrete;
  @starting-style {    opacity: 0;    transform: scale(0.96);  }}

Container Queries + Contextual Animations

Adapt animations to the component's container size, not the viewport.

css
.card-container {  container-type: inline-size;  container-name: card;}
@container card (min-width: 400px) {  .card-content {    animation: slide-in-right 400ms var(--ease-out-expo);  }}
@container card (max-width: 399px) {  .card-content {    animation: fade-in 300ms ease;  }}

Container-relative units in keyframes:

css
@keyframes slide-in-right {  from { transform: translateX(10cqw); opacity: 0; }  to   { transform: translateX(0); opacity: 1; }}

Advanced Visual Techniques

clip-path Transitions

css
.reveal {  clip-path: inset(0 100% 0 0);  transition: clip-path 600ms cubic-bezier(0.77, 0, 0.175, 1);}.reveal.visible {  clip-path: inset(0 0 0 0);}

Shape morphing: transition between circle(), ellipse(), polygon(), inset() - as long as the function type and point count match.

backdrop-filter

css
.glass {  background: oklch(0.98 0.01 250 / 0.6);  backdrop-filter: blur(12px) saturate(1.8);  -webkit-backdrop-filter: blur(12px) saturate(1.8); /* Safari */}

mix-blend-mode

css
.overlay-text {  mix-blend-mode: difference;  color: white; /* inverts over any background */}

Mesh Gradients (approximated)

css
.mesh {  background:    radial-gradient(at 20% 30%, oklch(0.7 0.2 310) 0%, transparent 50%),    radial-gradient(at 80% 60%, oklch(0.6 0.18 250) 0%, transparent 50%),    radial-gradient(at 50% 80%, oklch(0.75 0.15 170) 0%, transparent 50%),    oklch(0.15 0.02 280);}

conic-gradient Effects

css
.spinner {  background: conic-gradient(from 0deg, transparent 0%, oklch(0.7 0.15 250) 100%);  border-radius: 50%;  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), black calc(100% - 4px));  animation: spin 1s linear infinite;}

Do Not

BADGOODWhy
transition: all 300mstransition: opacity 300ms, transform 300msall triggers transitions on every property change, causes unexpected animations, and prevents browser optimization
Animate width, height, top, leftAnimate transform, opacity, clip-path, filterLayout-triggering properties force reflow on every frame - composite-only properties run on GPU
Scroll-driven animations without fallback@supports (animation-timeline: scroll()) { ... }Firefox has no release-channel support at all (Nightly only, behind layout.css.scroll-driven-animations.enabled) and Safari only shipped it in 26 - about one visitor in six sees nothing
@starting-style without transition-behaviorAlways pair with allow-discrete for display/overlayWithout it, display: none transitions are skipped entirely
Anchor positioning without position-try-fallbacksAlways define fallback positionsElement clips out of viewport if primary position has no space
animation-fill-mode: forwards on scroll-drivenUse both for scroll-driven animationsforwards can lock the element in its final state even when scrolling back

Deep dive

NeedReference
Browser-support tables, fallback patterns and progressive-enhancement strategies for scroll-driven animations, View Transitions, @starting-style, anchor positioning and container queries (plus accessibility and performance notes)references/modern-css.md

Source and attribution

Source:AThevon/genjutsuinskills/_jutsu/css-nativeat commit1f518a7

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

More from AThevon/genjutsu

Framer Motion

AThevon

Reference guidance for using the Framer Motion / Motion React animation library, covering AnimatePresence, layout animations, gestures and motion values.

Software Development431updated 3 days ago

Gsap

AThevon

Reference guidance for using the GSAP animation library, covering core tweens, timelines, ScrollTrigger and plugins.

Software Development431updated 3 days ago

More in Software Development

Playground

anthropics

Featured

Builds self-contained interactive HTML playgrounds with controls, live preview, and copyable prompt output.

Software Development37Kupdated today

M5 Onboard

anthropics

Featured

Provisions M5Stack ESP32 boards by detecting them on USB, flashing UIFlow 2.0 firmware, and installing a MicroPython app bundle.

Software Development37Kupdated today

Cardputer Buddy

anthropics

Featured

Guides iterating on a Cardputer-Adv MicroPython app bundle: adding apps, pushing files over USB-serial, tailing logs, and running REPL commands.

Software Development37Kupdated today

Web Design Guidelines

vercel-labs

Featured

Reviews UI code against Web Interface Guidelines fetched from a remote source and reports findings as file:line entries.

Software Development32Kupdated 5 weeks ago

Vercel React Native Skills

vercel-labs

Featured

React Native and Expo best-practice rules covering list performance, animation, navigation, UI patterns, state, and monorepo setup.

Software Development32Kupdated 5 weeks ago

Vercel React Best Practices

vercel-labs

Featured

Vercel's React and Next.js performance guidelines, organized as 70 rules for writing, reviewing, and refactoring code.

Software Development32Kupdated 5 weeks ago