CSS 与布局 / CSS Animation · 能力速览 待审核 22 页

CSS Animation · 能力速览

一组可交互的 CSS 动画能力演示，覆盖从最核心的八个 animation-* 子属性与 animation-composition，到 scroll-driven 与 view-driven 滚动驱动动画、@starting-style、多条动画合成与 offset 运动路径，以及动画事件与 Web Animations API；另有一页讲「怎样才算好动画」的七条设计准则，一页番外盘点 CSS 之外的动画技术 (动图格式、video、Lottie、SMIL、canvas)。每页都能直接查看效果并动手交互，顶部有「暂停全部动画」开关。

只需基础的 CSS 选择器与盒模型知识即可阅读，建议从核心属性一页开始；涉及自定义属性动画的部分，可先看 CSS 自定义属性系列的 @property 讲解。部分能力 (scroll 与 view timeline、object-view-box、animation-composition 等) 较新，各自进度并不同步，页内均已标注核对日期，建议用最新 Chromium 内核浏览。

起步 · 把一段动画跑起来

先让动画动起来并能控制: 八个 animation-* 子属性与 @keyframes, 缓动怎么写 (含把弹簧物理烘焙成 linear()), 逐帧雪碧图, 以及 display: none → block 这种离散值也要能过渡。

CSS · animation-* 子属性 · composition

核心属性：把一段 @keyframes 跑起来

逐个讲 animation 的各条长属性与简写，末尾讲 animation-composition 的三种取值：动画值与元素底样式同名相撞时如何合成。

 linear() easing · spring 物理 · 零运行时 JS

用 linear() 把弹簧物理烘焙进纯 CSS

cubic-bezier 最多拱一次，做不出多次回弹。把弹簧方程按时间采样塞进 linear()，物理就焊进了一条纯 CSS 缓动，运行时零 JS。

 sprite sheet · steps() · object-view-box

逐帧雪碧图：三种切帧技法

雪碧图配 steps() 做翻页书式逐帧动画，讲清为何必须 jump-none；同一张图用三种切帧技法同台对照，再深入 object-view-box。

 discrete · @starting-style · allow-discrete

none → block 也能动起来

先讲清 animation type，为何有的属性能补间、有的只能跳变；再到 @starting-style 与 transition-behavior: allow-discrete 两个解法。

滚动驱动 · 时间线不再是时间

把动画的进度从时钟换成滚动位置: animation-timeline 接滚动条 (scroll)、接元素进出视口 (view), 以及「滚到某处只触发一次」的 scroll-triggered。

scroll-driven · animation-timeline

Scroll Timeline：动画跟着滚动条走

把时间轴换成滚动进度：具名与匿名时间线、轴与 animation-range，以及用 timeline-scope 把名字提升到共同祖先。

 view-driven · view()

View Timeline：元素进出视口的进度

进度跟着某个元素相对视口的位置从 0% 走到 100%：名称、轴与 inset，以及 cover、contain、entry、exit 等 range 关键字。

 scroll-triggered · Chrome 145

Scroll-Triggered：滚到某处触发一次动画

与进度型不同，触发型是越过滚动位置就播一段按时间走的动画，进入正放、离开倒放，为 IntersectionObserver 的纯 CSS 替代，Chrome 145 起支持（核对于 2026-08）。

综合应用 · 六个成品

前两组的能力组合成能直接用的东西 —— 轮播、词轮播、字变形、文本撑满宽度、扫光、单值驱动的错开动画。每页都是一个完整效果, 而不是一个属性。

综合应用 · scroll-snap + view()

Scroll-Snap Rotator:「hello ___」滚动轮播

把一段 GSAP 滚动轮播纯 CSS 复刻：position: sticky 钉住、scroll-snap 吸附到正中、居中项用 animation-timeline: view() 点亮。

 综合应用 · @counter-style + @property <integer>

Word Rotator:@counter-style 做纯 CSS 词轮播

把一组待轮播的词当成 @counter-style 的符号表，再用一个注册成 <integer> 的索引取第几个词；让索引沿时间轴走，词便逐个翻，全程零 JS。

 综合应用 · 逐字 transition + 每字一条 delay

Text Morph：让一个词「变形」成另一个词

月份轮播里字不是整块换掉，而是每个字各自搬家、就地换脸：量出逐字位置、把两串对齐成一组槽位，再各给一条交错的过渡延迟。

 综合应用 · view(inline) + scroll-snap

Fit-to-Width：纯 CSS 让文本撑满宽度

把 view(inline) 反用成在样式层读尺寸比例的工具：entry-crossing 区间的进度恰等于容器宽与文本宽之比，拿它驱动 scale()。

 综合应用 · background-clip: text + WAAPI

文字扫光：让一条亮带扫过字形

background-clip: text 把渐变灌进字形，再平移 background-position 让亮带扫过文字。含对称亮带渐变与自适应 spread 的设计分析。

 综合应用 · @function + sibling-index()

Scrubbable Stagger：单个进度值驱动错开动画

把错开动画的延迟从时间维度改写成进度维度的偏移，整组只由一个标量驱动，因而可任意 scrub：接滑块、接滚动都行。

进阶控制 · 多条动画与 JS 接管

一个元素身上跑多条动画、沿任意路径运动, 以及用 Web Animations API 拿到句柄: 监听事件、seek、暂停、改变速度、平滑启停无限动画。

multiple animation · offset · motion path

多条动画与 Motion Path：沿曲线和任意路径运动

前半讲多条动画并列时各属性各用各的缓动，后半讲 offset-path 与 offset-distance 一族，七个点沿七种路径同时运动。

 events · Web Animations API

动画事件 + 用 JS 控制动画

四个动画事件与实时日志面板，再到 Web Animations API：getAnimations() 取现成动画，element.animate() 纯 JS 创建并控制播放。

 @property · interpolate-size

进阶：让「本来不能动」的东西动起来

@property 给自定义属性上类型，渐变角度、计数数字等才能被插值；interpolate-size 与 calc-size() 让长度真正过渡到 auto 一类关键字尺寸。

 infinite · 平滑变速 / 启停

控制无限动画：不跳变变速、平滑启停

用 animation-composition: add 叠两层同名动画，启用第二层即提速而不跳位；再用一段 transition 当刹车，把急起急停做成渐入渐出。

取舍与延伸 · 性能、a11y 与手感

该用 CSS 还是 JS、怎样尊重「减少动态效果」、什么样的动画算好, 以及 CSS 之外还有哪些做法 (动图 / video / Lottie / SMIL / canvas)。

性能 · CSS vs JS · 主线程

性能与取舍：该用 CSS 还是 JS?

差别不在语言而在线程：transform 与 opacity 能下合成线程，主线程阻塞也照样动；每帧重排的属性只能留在主线程。

 prefers-reduced-motion · a11y

尊重「减少动态效果」偏好

@media (prefers-reduced-motion: reduce) 命中时把大动作降级为轻动作而非删光；含模拟开关与 matchMedia 实时读系统偏好。

 设计准则 · Emil Kowalski

好动画的七条准则

其余各页讲能做什么，本页讲怎样才算做得好。整理自 Emil Kowalski 的七条准则，逐条落成可交互的对照演示。

 lerp 缓动 · 拖拽手感 · requestAnimationFrame

lerp 跟手：别把拖拽元素硬吸附在光标上

每帧把元素位置直接赋成光标很生硬；改用 lerp 让它每帧只朝光标追近一段，就多出惯性缓冲。附按 dt 校正的帧率无关版本。

 番外 · 动图 / video / Lottie / SMIL / canvas

番外：CSS 之外，网页动画还有哪些做法？

盘点 CSS 之外的动画技术并逐个上手：动图格式、<video> 加 JS、Lottie 矢量 JSON、SVG SMIL、canvas 粒子，以及 JS 动画库的选型法则。

相关文档 / 链接

📐 规范 / 文档

延伸阅读