AI 摘要：本文系统讲解了 CSS 新增的 linear() 时间函数如何取代传统 Bézier 曲线实现物理感动画（如弹簧、反弹等）。作者展示了从手动绘制到使用工具自动生成曲线的全过程，分析了 linear() 的语法结构、性能表现及使用局限，并给出实际工程中使用变量与媒体查询的最佳实践。

1. 背景与问题
• 传统的 CSS 动画多依赖 cubic-bezier() 曲线控制速率，但难以模拟弹性或物理效果。
• 开发者过去往往用 JavaScript 库（如 React Spring）实现，但带来主线程阻塞与性能权衡。
• CSS 新增的 linear() 函数允许通过一系列线性分段点定义任意缓动曲线，可原生表达弹跳、振动等效果。

2. linear() 函数原理
• linear() 接受一组 0–1 范围的浮点值，各点线性连接形成曲线。
• 可超出 0–1 实现“overshoot”（超冲），营造弹性。
• 点数越多，动画越平滑；作者从 11 到 50 点的实验验证了差异。

3. 工具实战
• 推荐使用 Linear() Easing Generator 与 Easing Wizard 自动生成数据。
• 新语法支持为每个点标注时间百分比，使曲线在较少数据点下更精确。
• 工具可将弹性参数（stiffness、damping、mass）转化为 CSS 代码，并计算最优持续时间。

4. 限制与挑战
• 时间基准限制：CSS 必须定义 duration，不支持真正的物理时间动态计算。
• 中断问题（interrupts）：React Spring 可处理惯性，而 CSS 转场中断后立即反向，缺乏自然过渡感。
• 性能考量：实际测试显示即使 linear() 包含百余数据点，帧率与体积影响极小（仅增约 1.3 kB gzip），但建议通过 CSS 变量复用。

5. 实用建议与模式
• 将常用的 linear() 表达式与持续时间封装为 CSS 变量（design tokens）。
• 用 @supports 检查浏览器兼容性并提供 cubic-bezier() 回退。
• 结合 @media (prefers-reduced-motion) 照顾无障碍动效偏好。
• 在注释中记录物理参数，方便未来调整。

Joshwcomeau

Springs and Bounces in Native CSS • Josh W. Comeau

The “linear()” timing function is a game-changer; it allows us to model physics-based motion right in vanilla CSS! That said, there are some limitations and quirks to be aware of. I’ve been experimenting with this API for a while now, and in this post, I’ll…

几个月前，我自认为对 AI 认知是比较贴切，能写点脚本、做下网页开发，但处理不了 Rolldown 这种复杂度的项目。
而现在，过去两周里，它几乎替我写了所有的代码。整个流程没有魔法，只有跟着官方文档《Claude Code: Best practices for agentic coding》的笨拙使用，仅仅是这样，就已经颠覆了我的认知。

Chris Bolson 分享了曲线滚动条主题的两种变体：一种是超级曲线，另一种是更微妙的曲线。"滚动条遵循容器的边框半径，长度根据内容数量计算"。

AI 摘要：本文系统地讲解了如何在网站中使用 View Transition API，通过 CSS 与 JavaScript 结合实现页面或内容间的动画过渡，从基础语法、调试技巧、命名规范、类型区分到最佳实践完整覆盖。作者强调利用伪元素与动画组结构可极大简化复杂转场开发，提出在 prefers-reduced-motion 设置下应合理退化，同时介绍跨页面转场与未来 CSS 原生增强的前景。

1. View Transition API 基础
• View Transition API 允许在状态切换间实现平滑动画，方式包括自动触发或通过 JavaScript 手动调用。
• 浏览器在启动转场时会创建当前和未来状态的快照进行对比并生成关键帧动画，机制类似 FLIP 技术但由 CSS 自动处理。
• 若未改动浏览器原生导航，可简单通过 @view-transition { navigation: auto; } 启用。

2. View Transition 结构与伪元素 (pseudo elements)
• 介绍转场的 DOM 架构：::view-transition-group、::view-transition-image-pair、::view-transition-old、::view-transition-new。
• 每个转场组独立包含前后状态快照，开发者可用 view-transition-name 命名控制。
• 快照为非交互式静态影像，转场中无法修改其内容或动态更新样式。

3. 调试与命名
• Chrome DevTools 的动画面板 (Animations Drawer) 可用于调试、调整动画速度与暂停查看。
• 推荐为每个转场元素添加独立的 view-transition-name，跨页面动画需在两页手动匹配命名。
• 使用 match-element 可支持同文档内转场。

4. View Transition 类型与事件
• 通过 JavaScript 可在 document.startViewTransition() 调用时传入 types 参数，区分不同交互的转场类型。
• 可结合 :active-view-transition-type(filter) 伪类为特定类型设置动画样式。
• 使用 pagereveal 事件判断页面跳转方向与来源，实现更复杂的跨页面转场逻辑。
• 当前部分旧版 Chrome 不支持类型参数，可通过 try-catch 或自定义 data 属性兼容处理。

5. 最佳实践与组织结构
• 应为所有 view-transition-name 设置一致的动画时长、缓动函数（animation-timing-function）与填充模式（fill-mode）。
• 建议用短变量如 --vt 生成唯一 ID，在使用 CMS 或框架时可轻量生成名称。
• 使用 prefers-reduced-motion: no-preference 媒体查询，以保证可访问性良好的退化行为。
• 可通过选择器 [style*="--vt"] 一次性添加全部转场名称。

6. 高阶应用与动画逻辑
• 转场组中可能只存在 old/new 状态，用于筛选（filter）或排序（sort）操作表现不同。
• 使用 CSS 伪类 :only-child 区分仅有 old/new 状态的元素，实现“进入”或“退出”动画。
• 案例包括从总览页到详情页的转场动画。
• 当前 :has 尚无法检查组内是否同时存在 old/new 元素，此功能已在 W3C 提案中。

7. 浏览器兼容性与后续发展
• Firefox 144 已支持 View Transition API，但仅限同文档转场。
• 跨文档转场（cross-document transitions）正在推进，可跟踪 MDN 与 Chrome 团队 Demo 获取更新。

Piccalilli

Start implementing view transitions on your websites today

Browser support for view transitions is rocketing and there's not many better out there to help you understand how to implement them than Cyd Stumpel.