--- title: "纯 CSS 动效" summary: "不引动画库：linear() 弹簧缓动、View Transitions 页面过渡、滚动驱动、@starting-style 入场、高度到 auto。" category: "motion (动画效果)" origin: "original" stack: ["html","css"] tags: ["动效","弹簧","页面过渡","滚动驱动","零依赖"] demo: "https://zhuoqidev.com/design/demos/css-only-motion/" url: "https://zhuoqidev.com/design/css-only-motion/" license: "MIT" added: "2026-10-14" translation: "https://zhuoqidev.com/en/design/css-only-motion/index.md" --- # 纯 CSS 动效 > 不引动画库：linear() 弹簧缓动、View Transitions 页面过渡、滚动驱动、@starting-style 入场、高度到 auto。 ## 看点 - **弹簧写成缓动曲线**：把阻尼弹簧采样成 31 个点，塞进 `linear()`，就是一条会冲过头再回来的 easing。两条够用：`--spring`（阻尼 0.5，过冲约 16%）给按下 / 拖动 / 落下，`--spring-soft`（约 8%）给窗口和页面。演示里的曲线图是直接读这两个 CSS 变量画的。 - **页面过渡**：`@view-transition { navigation: auto; }` 一行让同站跳转自带过渡；旧页上移淡出，新页用软弹簧落下，被点的标题通过同一个 `view-transition-name` 飞成下一页的大标题。 - **滚动驱动**：阅读进度条是 `animation-timeline: scroll()`，卡片入场是 `animation-timeline: view()` 加 `animation-range: entry 0% entry 75%`，没有一行滚动监听。 - **首帧入场**：`@starting-style` 写元素第一次渲染时的样子，新插进 DOM 的提示条会从那里过渡过来，不用 keyframes，也不用「等一帧再加类」。 - **高度到 auto**：根上 `interpolate-size: allow-keywords`，`height: 0 ↔ auto` 就能过渡，还能配弹簧。 - **每块都能退化**：不支持的浏览器直接显示最终状态；演示右上角的小标签会告诉你当前浏览器支持哪些。 ## 怎么用 1. 拷 `:root` 里的 `--spring`、`--spring-soft` 两个变量，按钮写 `transition: scale .45s var(--spring)`，`:active { scale: .93 }`。 2. 多页站点要页面过渡：全局 CSS 加 `@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }`，顶栏、底部导航各给一个固定的 `view-transition-name`，跳转时它们就原地不动。 3. 想让标题「飞」过去：列表页被点的标题和详情页的大标题设成同一个 `view-transition-name`（同一时刻一页里只能有一个元素叫这个名字），再拷 `::view-transition-group(vt-title)` 那几段。 4. 滚动驱动的规则包在 `@supports (animation-timeline: view())` 和 `prefers-reduced-motion: no-preference` 里，拷演示里的长属性写法。 ## 坑 - 演示是单个页面，跨文档的 `@view-transition` 跑不起来，所以用的是同文档的 `document.startViewTransition()`，效果和伪元素写法完全一样。真实多页站点用 `@view-transition`，不需要这段 JS。 - `animation` 简写会把 `animation-timeline` 重置成 `auto`，所以 `animation-timeline` 必须写在简写之后。更隐蔽的是：有的 CSS 压缩工具会把几个长属性重新合成一个浏览器不认的简写，效果静默消失，要去检查构建产物。 - `view-transition-name` 在同一时刻必须唯一：列表里每一项都写死同一个名字，过渡会直接被跳过。只在点击时给被点的那一项设名字。 - `linear()` 弹簧只是「时间 → 进度」的曲线，不认速度：拖拽松手时甩得再快，回弹也是同一条曲线。要真物理就得上 JS。 - 「减少动态效果」要单独处理过渡伪元素：通配符 `*` 管不到 `::view-transition-*`。 ## 参考实现（完整源码） 在线演示：https://zhuoqidev.com/design/demos/css-only-motion/。单文件，存成 .html 就能打开。 ### index.html ```html 纯 CSS 动效

纯 CSS 动效

不引动画库：弹簧缓动、页面过渡、滚动驱动、首帧入场、高度到 auto。每块右上角显示你的浏览器支不支持；系统开了「减少动态效果」时全部关掉。

01弹簧缓动 linear()

把阻尼弹簧采样成 31 个点写进 linear()：冲过头一点再回来。红线 = --spring（过冲约 16%），蓝线 = --spring-soft（约 8%），灰线是普通的 ease-out。

1.0 0 时间
ease-out
--spring
--spring-soft

02页面过渡 View Transitions

点一篇：旧画面上移淡出、新画面弹着落下，被点的标题直接「飞」成下一页的大标题。

03滚动驱动 animation-timeline

在框里滚动：顶上红条是阅读进度（scroll()），卡片进入视口时浮上来（view()）。全程没有一行 JS。

  1. 01进度条跟着滚动条走，不监听 scroll 事件。
  2. 02卡片从下方 36px 浮上来，同时淡入。
  3. 03animation-range: entry 0% entry 75% 决定什么时候播完。
  4. 04动画跑在合成线程，滚得再快也不掉帧。
  5. 05不支持的浏览器直接显示静止的内容。
  6. 06减少动态效果时整段关掉。
  7. 07再往下一点。
  8. 08到底了，进度条也满了。

04首帧入场 @starting-style

新插入的元素第一次渲染时从 @starting-style 里的样子过渡过来，不用写 keyframes，也不用等一帧再加类。

01已保存草稿
02复制好了

05高度到 auto interpolate-size

以前 height: 0 → auto 不能过渡，只能量高度写死。现在根上一句 interpolate-size: allow-keywords 就行，还能配弹簧。

展开的高度是内容自己撑出来的，换文字、换字号都不用改 CSS。

不支持的浏览器会直接跳到展开状态，没有动画但不坏。

06按下回弹 · 悬停抬起

按钮按下 scale: .93，松手用弹簧弹回；卡片悬停抬起 3px、轻轻歪一点。都是一行 transition。

把鼠标放上来translateY(-3px) rotate(-.4deg)
```