Css Native

AThevon/genjutsu/skills/_jutsu/css-native

作者 AThevon1f518a71378b15d423389e546e767cffc86e14c3无许可证431 个星标收录于 2026年10月9日更新于 2026年10月9日仓库3天前更新

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

仅含说明Software DevelopmentDesign & Creative
AI 生成的概览

零依赖 CSS 动画与现代视觉技术的参考指南。

功能
该技能是一份仅含说明的参考，涵盖原生 CSS 动画与视觉技术，包括滚动驱动动画、View Transitions API、@starting-style、锚点定位、容器查询、clip-path 过渡、backdrop-filter、混合模式与渐变。它给出何时使用原生 CSS、何时改用动画库的判断依据、代码示例，以及应避免的做法清单。配套参考文件包含浏览器支持表、回退方案与渐进增强说明。
适用场景
在网页界面中实现动画或视觉效果、并判断原生 CSS 是否足够时使用。适用于滚动触发的显现效果、从 display: none 进入或退出的过渡、提示框与弹出层定位以及页面切换过渡。也适合在检查这些特性的回退方案与浏览器支持限制时参考。
运行要求
无需脚本或软件包，技能仅为说明内容。假定存在使用 HTML 与 CSS 的网页项目，代理可能需要读取随附的参考文件。部分技术依赖较新的浏览器支持，文档说明版本信息在特定日期核验，使用前应重新确认。

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

来源与署名

来源：AThevon/genjutsu位于skills/_jutsu/css-native提交1f518a7

许可证： 无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

更多来自 AThevon/genjutsu 的技能

Framer Motion

AThevon

关于使用 Framer Motion / Motion React 动画库的参考指南，涵盖 AnimatePresence、布局动画、手势和 motion values。

Software Development4313天前更新

Gsap

AThevon

GSAP 动画库使用参考，涵盖核心补间、时间轴、ScrollTrigger 与插件。

Software Development4313天前更新

更多Software Development技能

Playground

anthropics

精选

构建自包含的交互式 HTML 演练场，包含控件、实时预览和可复制的提示词输出。

Software Development37K今天更新

M5 Onboard

anthropics

精选

通过 USB 检测 M5Stack ESP32 开发板，刷写 UIFlow 2.0 固件并安装 MicroPython 应用包。

Software Development37K今天更新

Cardputer Buddy

anthropics

精选

指导迭代 Cardputer-Adv 的 MicroPython 应用包：添加应用、通过 USB 串口推送文件、查看日志并运行 REPL 命令。

Software Development37K今天更新

Web Design Guidelines

vercel-labs

精选

依据从远程来源获取的 Web Interface Guidelines 审查 UI 代码，并以 file:line 形式报告问题。

Software Development32K5周前更新

Vercel React Native Skills

vercel-labs

精选

React Native 与 Expo 最佳实践规则，涵盖列表性能、动画、导航、UI 模式、状态与 monorepo 配置。

Software Development32K5周前更新

Vercel React Best Practices

vercel-labs

精选

Vercel 的 React 与 Next.js 性能指南，以 70 条规则的形式用于编写、审查和重构代码。

Software Development32K5周前更新