AI 摘要：这篇文章详细记录了制作 WebGL 个人作品集的全过程。文章展现了一个从最初构想到最终实现的探索旅程。文中涉及诸多技术，包括 Next.js、Three.js、React Three Fiber 以及 GSAP（含 MorphSVG 插件），并分享了多个实现细节，如 Fold 效果、MeshPortal 场景嵌入系统、基于滚动速度的 Shader 动效，以及 SVG 到 Canvas 的性能优化。最终，作品以戏剧化的视觉语言融合作者在戏剧、电影与编程三重背景下的美学追求。

1. 起点：Fold 效果与创意萌芽
• 以 Vector Projection 实现自由方向的折叠效果
• Shader 中的假阴影计算增加立体感
• 从最初“主特效”到成为创意起点的自我修正

2. 构建中：角色与 MeshPortal 系统
• 创建带角色的屏幕，利用 Mixamo 动作资源
• 引入 MeshPortal 技术，将独立 3D 场景限制在屏幕范围内
• 建立系统实现 WebGL 与 DOM 布局同步（mask 区域）
• 采用 hash-based 导航配合 GSAP 动画实现平滑过渡

3. 节奏延伸：让角色起舞与滚动动效
• 通过基于速度的 Stretch Shader 让文字响应滚动加速度
• 利用 depth-aware 动线制造空间层次
• 前端 JS 调控 Shader uniform 实现自然的运动衰减与模糊

4. 创意突破：不再拘泥于“屏幕”
• 从平面屏幕过渡到文字形态（Morphing Plane to Text）
• 借助 GSAP MorphSVG 插件实现路径平滑过渡
• 优化性能：通过 Canvas 渲染替代 SVG DOM 调用，保持 60fps
• 将“WHO” 文字转化为剧场式的舞台： Cinema、Theater、Code 三部分，用视频投影营造剪影效果

5. 闭环：Contact 页与「MEET ME」交互收尾
• 通过算得精确的 DOM 与 WebGL 匹配 mask 完成动态过渡
• 使用 GSAP 的 back.out 缓动创造富表现力的弹性动画
• 利用镜头视角（FOV）和空间深度营造收尾的视觉叙事
• 以贴纸元素作为呼应起点的个人符号，为项目画上圆满句号

6. 总结与思考
• 作品的发展不是强行设计，而是对“创意呼吸”的倾听
• 通过“让过程塑形”，实现技术与自我表达的统一
• 最终成果是一种情感与视觉共鸣的体验，而非单纯代码演示

AI 摘要：本文介绍了通过将动画关键帧 (@keyframes) 设计为可重用的 Keyframes Tokens，来实现动画系统的标准化与可维护化。作者说明了动画重复定义与全局作用域冲突带来的问题，提出以集中式样式表、命名空间、可定制的 CSS 自定义属性（custom properties）和设计 tokens 的方式来统一所有动画。文中展示了 fade-in、slide-in、zoom、spin、pulse 等动画的动态实现，并讨论了动画叠加、组合 (animation-composition)、可访问性 (prefers-reduced-motion) 与实际项目实施策略。核心思想是：让动画像颜色、字号、间距一样成为可管理的系统资源。

1. 动画混乱的根源
• 各组件独立创建重复的 @keyframes，导致代码冗余。
• CSS keyframes 属于全局作用域，容易被后加载样式覆盖。
• 修改或统一动画需全局搜查，影响维护效率。

2. 统一的解决方案：Keyframes Tokens
• 将动画关键帧集中存放在共享样式表中，形成唯一数据源。
• 利用命名空间（如 kf- 前缀）避免命名冲突。
• 借助 CSS 自定义属性实现动态参数化，支持多场景适配。
• 使动画定义与其他 design tokens（颜色、间距等）协同管理。

3. 构建基础动画库
• Fade In：定义基础淡入动画并统一调用。
• Slide In：通过自定义属性 --kf-slide-from 控制入场方向。
• Zoom：用 --kf-zoom-from/to 实现双向缩放。
• Spin/Pulse：封装连续动画，可控制旋转幅度、脉冲强度。
• Bounce/Elastic：展示复杂缓动（easing）动画封装方法。

4. 动画组合与冲突处理
• 可将多种动画组合，如 fade+slide 或 zoom+pulse。
• 对同一属性冲突时使用 animation-composition: add; 合并动画效果。
• 适当使用动画时间错位（stagger）提升视觉节奏。
• 说明 transform 与单独变换 (translate/scale) 的执行顺序差异。

5. 无障碍与减弱动效（Reduced Motion）
• 利用 prefers-reduced-motion 提供无动画或柔和过渡版本。
• 对需要仍然变换属性的动画定义瞬时完成（instant-in）版本。
• 保留必要动效但平滑化运动，提升可访问性。

6. 实施策略与最佳实践
• 渐进引入：从常见动画（fade、slide）着手。
• 命名规范：统一前缀标识 token 动画。
• 文档化：在 token 文件添加注释说明用途与参数。
• 灵活性与简洁性：仅暴露必要自定义属性。
• 融入设计体系：将 keyframes tokens 视为 design language 的一部分。

Smashing Magazine

Keyframes Tokens: Standardizing Animation Across Projects — Smashing Magazine

Animations can be one of the most joyful parts of building interfaces, but without structure, they can also become one of the biggest sources of frustration. By consolidating and standardizing keyframes, you take something that is usually messy and hard to…

AI 摘要：这篇博文由 Chris Coyier 撰写，通过一系列小实验展示了 CSS random() 函数的潜力与趣味。作者用它生成旋转星空、滚动视差(parallax)星空及基于滚动的点阵动效，探索随机数与动画、滚动时间轴 (scroll-driven animation) 以及 steps() 函数的互动效果。虽然目前仅 Safari 技术预览版支持该功能，但文章提供了可视化演示和代码片段，展示了 random() 带来的新创意空间和未来样式系统的潜能。

1. 引言与 random() 函数现状
• 作者介绍 CSS random() 函数的出现与规范化
• 指出目前仅 Safari Technical Preview 支持
• 强调实验性质：探索随机性在视觉设计中的可玩性

2. 旋转星空背景（Rotating Star Field）
• 灵感来自游戏 BALL x PIT 的旋转星空视觉
• 通过一系列定位在中心的 <div> 构建星体容器
• 使用 random() 控制星距、高度与旋转角度实现随机布局
• 结合 CSS 动画让内外圈星星反向旋转，形成动态层次感
• 提供 Demo 示例

3. 滚动视差星空（Parallax Stars）
• 扩展星空概念，将运动与滚动事件绑定
• 随机分组不同星星移动速度（100px、200px、300px）制造深度感
• 利用 animation-timeline: scroll(root) 与 animation-composition: accumulate 控制滚动叠加动画
• 展示了如何通过原生 CSS 控制视觉差与滚动互动
• 提供 Demo 示例

4. 网格点水平线（Horizontal Rules of Gridded Dots）
• 探索 random() 与 steps() 的结合，用离散滚动帧创造“跳动式”动画
• 创建点阵 <div> 元素随机偏移，再在滚动中平滑对齐
• 使用 view-timeline 触发每个分隔条的独立动画范围
• 通过渐变色与对齐位置制造视觉满足的“入场”效果
• 提供 Demo 示例

5. 结语与对未来 CSS 的思考
• random() 带来动态纹理与自然随机性的设计潜力
• 讨论当前需大量 <div> 的实现代价，期望未来 CSS 原生支持“可样式化网格单元”
• 总结：CSS 的随机性为网页设计开辟更多创造性方向

Frontendmasters

More CSS random() Learning Through Experiments

There is quite a bit of interesting design possibility with `random()` coming to CSS. It pairs nicely with animation, particularly animation-composition for agumenting those generated values.

“一段以弹珠为主角的伪 3D 循环动画，设计成类似预加载器的效果。此外，孔洞底部还使用了特殊的 SVG clip paths 以及一些秘密交替的路径。”——Jon Kantner

AI 摘要：本文讲述了如何仅使用 CSS（不依赖 WebGL 或 Canvas）创建三维等距地形，通过层叠网格（stacked grids）与 3D 变换（3D transforms）构建出一个像素风的生成式世界。作者介绍了从镜头视角（perspective）设置，到多层网格架构、地形单元（flat、ramp、wedge、spike）的几何定义，再到噪声生成高度图和性能优化等完整技术路径。

jhey ʕ•ᴥ•ʔ (@jh3yy): hook this 3D CSS card up to device rotation? sure! 👨‍🍳

tip: use the DevTools "Sensors" emulator with "Custom Orientation" to debug/refine before taking it to a real device 👇

在 Jhey Tompkins 设计的这款可配置 Pen 中，将鼠标悬停在加号网格上，即可观看它们变换颜色和旋转。您还可以通过顶部的控制面板调整网格大小和主题颜色。

AI 摘要：本文介绍了 CSS 中新引入的 sibling-index() 和 sibling-count() 两个函数，它们让我们可以直接通过纯 CSS 计算元素在兄弟节点中的相对位置，实现无需 JavaScript 的 “错位动画（staggered animation）”。通过结合这些函数与 :has() 伪类、transition 延时变量等技巧，作者演示了如何在选中某个卡片时，让它左右的卡片以时间递增或递减的顺序逐个消失，完整地展示了纯 CSS 动画逻辑与可替代 JS 的思路。

1. 新函数简介与基础概念
• sibling-index() 返回元素在兄弟节点中的序号，从 1 开始计数；
• sibling-count() 返回兄弟节点的总数（包含自身）；
• 二者结合可实现基于结构位置的样式或动画计算，例如递增宽度或动画延时。

2. 示例布局与核心结构
• 使用 .cards-wrapper 包裹多张 .cards 卡片，通过 flexbox 横向排列；
• 每个 .cards 内部含有覆盖整个卡片的 input[type="checkbox"]，点击后触发交互。

3. 主要的选择器逻辑

• .cards:has(:checked)：选中状态的卡片，用于高亮；
• .cards-wrapper:has(:checked) .cards:not(&)：当有选中卡片时，让其他卡片消失；
• & ~ .cards 与 .cards:not(&) 分别控制右边与左边卡片的延迟方向（递减或递增）。

4. 样式声明解析
• 高亮选中卡片：添加虚线边框；
• 让未选卡片消失：透明度降为 0，宽度缩为 0，并在动画结束后设置 display: none；
• 过渡动画：transition-behavior: allow-discrete 保障 display 的离散变化；
• 时间递减／递增：
• 右侧卡片使用 --n: calc(sibling-count() - sibling-index() + 1)；
• 左侧卡片使用 --n: sibling-index()；
• 最终延时计算：transition-delay: calc(var(--n) * 0.2s)。

5. 动画示例与完整规则组合
• 当某张卡片被选中时，其它卡片依序向外逐个消失，形成错位延迟动画效果；
• 所有规则组合后实现纯 CSS 版本的交互过渡，无需额外脚本支持。

6. 兼容方案（Fallback）
• 对不支持 sibling-* 函数的浏览器，通过 JavaScript 动态计算 --n 值；
• JS 逻辑基于监听 change 事件手动设置左右两侧卡片的延时变量；
• 保持与 CSS 核心机制一致的动画行为。

7. 扩展示例与实践思路
• 使用 sibling-index() 实现类似手风琴（accordion）式开合动画；
• 即便不带延时，也可通过该函数控制显示隐藏的顺序与方向；
• 展示纯 原生 CSS 实现复杂交互效果的潜力。

Frontend Masters

Staggered Animation with CSS sibling-* Functions

The CSS functions sibling-index() and sibling-count() return an element’s position relative to its siblings and the total number of siblings, including itself. This is useful for styling elements based on their positions.

AI 摘要：本文系统梳理网页动画性能的分级标准，从浏览器渲染管线（render pipeline）的底层原理出发，解释为何某些动画（如 transform、opacity 等）能高效运行于 GPU 的 compositor 线程，而另一些（如涉及布局、重绘的动画）则极为耗费资源。作者将动画按性能分为 S 到 F 六个等级，指出各层级的触发条件、适用场景及典型陷阱，并给出实践经验（如 will-change 的使用、CSS 变量的潜在灾难、“thrashing”问题等），帮助开发者建立动画性能直觉与优化策略。

1. 渲染管线与性能基础
• 解释浏览器渲染的三个阶段：Layout、Paint、Composite，并指出触发一个阶段会引发其后所有阶段。
• 区分主线程（main thread）与合成线程（compositor thread）的运行逻辑，说明主线程阻塞将导致动画卡顿。

2. 分级体系（Tiers）总览
• S-Tier：完全运行于 compositor 线程的硬件加速动画，性能最佳。
• A-Tier：在主线程驱动但仅触发 compositor 操作的动画。
• B-Tier：含有一次性 DOM 测量成本的动画。
• C-Tier：触发 Paint 的动画。
• D-Tier：触发布局（Layout）重新计算。
• F-Tier：存在频繁读写 DOM 的“thrashing”灾难级动画。

3. S-Tier：硬件加速动画策略
• 可在 compositor 线程执行的属性有 transform、opacity、filter、clip-path。
• 借助 CSS、Web Animations API（WAAPI）或 Motion 等库实现流畅动画。
• 滚动动画的性能优势源于滚动本身在 compositor 线程执行。
• “去优化”风险：Safari 等浏览器可能丢失硬件加速。
• GPU 图层（layer）太大易耗尽内存，滤镜（尤其是 blur）成本高昂。

4. A-Tier：主线程驱动的合成动画
• 动画触发合成层更新而非重绘，前提是元素已成为图层（如 will-change）。
• JS 动画库（如 GSAP）或 requestAnimationFrame 实现的动画多属此类。
• 利用 IntersectionObserver 可节省主线程资源并暂停不可见动画。
• 提及 Shader 动画性能超强但仍受主线程同步影响。

5. B-Tier：带有预处理的高效布局动画
• Motion 的 layout 动画使用 FLIP（First, Last, Invert, Play）技术，通过 transform 模拟尺寸变化，减少重排。
• 初始测量存在成本，但整体能显著优化动画流畅度。

6. C-Tier：触发重绘的动画与陷阱
• 改变颜色、圆角等属性触发 Paint，相比几何变化轻一些。
• 警惕 CSS 变量（CSS Variables）导致不可预测性能开销：尤其全局继承时全树样式重算。
• 优化策略：缩小变量作用域或用 @property 禁止继承。
• SVG 属性动画与 View Transition API 动画的性能权衡与实践改进。

7. D-Tier：布局驱动的高成本动画
• 改变 width、margin、grid-template-columns 等属性会引发重布局。
• 使用 position: absolute/fixed 或 contain CSS 属性可减少布局范围。

8. F-Tier：性能“地狱”——样式与布局 Thrashing
• 反复读写 DOM 尺寸（如 offsetWidth）导致强制同步布局。
• 建议通过批量化读写（如 Motion 的 frame API）避免 thrashing 问题。

9. 结论
• 动画性能优化不止是“黑魔法”，而是一门平衡内存、渲染步骤与硬件加速的艺术。
• 理解渲染管线可让开发者具备判断性能瓶颈的直觉，S 级动画不代表无代价，关键是为实际体验做正确取舍。

motion.dev

The Web Animation Performance Tier List - Motion Blog

Learn what makes web animations fast, slow, and everything in between with our 2025 web animation performance tier list.

AI 摘要：这篇文章介绍了如何利用 SVG 的 pathLength 属性简化路径动画管理流程。作者先讲解一个常见的“签名动画”，传统方法需用 JavaScript 计算路径长度 (getTotalLength)，再展示通过手动设置 pathLength，可以让 CSS 动画以固定比例管理 stroke-dasharray 和 stroke-dashoffset，从而更直观地控制动画节奏，减少依赖 JS 的复杂度。

1. SVG 路径动画的常见方法
• 介绍一种常见的“签名动画”效果，用 stroke-dasharray 和 stroke-dashoffset 实现路径绘制。
• 讲解 stroke-dasharray 如何将路径“切割”为可见段与间隔。
• 通过调整 stroke-dashoffset 实现路径显现动画。

2. 路径总长度的计算与问题
• 在未指定 pathLength 前，需要从 JavaScript 中调用 getTotalLength() 获取路径总长度。
• 此过程为实现动画添加了额外步骤，且维护成本高。

3. pathLength 属性的妙用
• 介绍 pathLength 属性：可直接在 SVG 标签上定义路径的理论总长度。
• 设置 pathLength="100" 后，可以将动画参数基于此比例统一规划。
• 配合 CSS 的 transition，让路径动画以百分比方式更易管理。

4. 优化效果与开发体验
• 使用 pathLength 后的代码更简洁、可读性更强。
• 动画更容易调节且不需依赖 JavaScript。
• 作者总结自己对新方法的偏爱并鼓励读者试用。

Stefanjudis

pathLength makes makes SVG path animations easier to manage

Use the "pathLength` attribute to make animating "stroke-dasharray" and "stroke-dashoffset" easier.

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 摘要：本文系统地讲解了如何在网站中使用 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.

AI 摘要：本文通过一个简洁的示例与完整讲解，展示了如何仅用几行现代 CSS 代码实现 N 个元素的顺序动画。作者利用 CSS 的 linear() 函数自定义时间曲线（timing function），结合 sibling-index() 与 sibling-count() 自动计算每个元素的动画时间段，使所有元素依次播放动画而不需复杂的 keyframes 管理。该方法具有可扩展性和可维护性，为 CSS 动画提供了新的编程式思路。

1. 背景与问题定义
• 多个元素需要依次执行相同的动画，传统方法需手动定义复杂 keyframes 与延迟。
• 目标：用纯 CSS，在不修改 keyframes 的前提下让动画顺序执行、可循环、可扩展至任意元素数量。

2. CSS linear() 函数解释
• linear() 是一种新的时间函数（easing function），支持自定义多个控制点（control points）。
• 通过定义输入进度（input progress）与输出进度（output progress）来构造任意变化曲线。
• 相较于传统 ease 或 cubic-bezier()，linear() 可精确定义不同阶段的动画输出。
• 可用百分比或数值型进度表示时间点，省略值会自动插补为中间点。

3. 利用 linear() 构造延迟（animation delay）
• 通过重复定义相同输出值（如 linear(0 0%, 0 50%, 1 100%)）可制造“暂停”效果。
• 表示动画前半段不变化、后半段才执行。
• 可灵活组合多个时间段，无需修改 keyframes 即可调整节奏。

4. 构建顺序动画逻辑
• 多元素顺序动画思想：每个元素仅在自己的时间段（range）内动画，其余时间保持静止。

• 对于 N 个元素，将总时间分为 N 等份，每个元素依次占一个区间。

• 变量定义：
• S = 起始点 = (i - 1) × 100% / N
• E = 结束点 = i × 100% / N

• 关键 CSS 实现：
--_s: calc(100%(sibling-index()-1)/sibling-count());
--_e: calc(100%(sibling-index())/sibling-count());
animation: x calc(var(--d)*sibling-count()) infinite
linear(0, 0 var(--_s), 1, 0 var(--_e), 0);

• 使用 sibling-index()/sibling-count() 自动计算索引与总量，无需额外 JS。

5. 浏览器兼容性与注意事项
• 目前主要支持 Chromium 内核（Chrome、Edge），Firefox 与 WebKit 尚在推进中。
• 某些变量可能需通过 @property 注册以解决兼容性问题。

6. 扩展与变体
• 可设计多个重叠区间（N+1 ranges）使动画出现过渡重叠（overlapping）效果。
• 原理一致：通过调整控制点范围改变动画逻辑，可产生更复杂的节奏模式。

7. 总结
• linear() 函数原为实现复杂缓动曲线而生，但结合现代 CSS 特性（变量、siblings 函数）可实现可编程化动画逻辑。
• 提供一种无需 JS、结构清晰、可扩展的纯 CSS 动画新范式。

CSS-Tricks

Sequential linear() Animation With N Elements | CSS-Tricks

Let’s suppose you have N elements with the same animation that should animate sequentially. Modern CSS makes this easy and it works for any number of items!

AI 摘要：本文通过实例展示如何将 GSAP 动画库与 WebGL 着色器（Shaders）结合，以构建沉浸式网页交互视觉。作者从基础的 HTML 布局与 Three.js 场景搭建开始，逐步扩展至通过 GSAP 动画驱动着色器 uniform 参数，实现包括灰阶渐变、点击波纹、鼠标揭示遮罩、点击与按压的流体扭曲、以及基于滚动的动态模糊等复杂 GPU 动效。文章强调 JavaScript 动画时间线与 GLSL 实时渲染逻辑的联动，让网站视觉能以自然、物理感与交互性呈现。

1. 基础设置与 HTML/CSS 结构
• 构建页面容器与隐藏溢出内容，准备 GSAP Draggable 和 ScrollTrigger 绑定。
• 在 Three.js 环境中创建 Stage 类，负责 Renderer、Camera、Scene 管理。
• 使用 GSAP ticker 同步渲染循环，实现动画与渲染一致更新。

2. WebGL Stage 与平面载入
• 使用 TextureLoader 创建平面 (PlaneGeometry)，加载 DOM 中的图片纹理。
• 将 DOM 元素与 Canvas 中的物体同步，通过正交相机的坐标转换函数转换屏幕坐标到世界坐标。
• 替换标准材质为 ShaderMaterial，导入自定义 vertex/fragment shader。

3. 点击波纹与灰阶渐变效果（Ripple + Grayscale）
• 使用 GSAP Observer 监听点击事件。
• 点击后修改 shader uniform uGrayscaleProgress 在彩色与灰阶之间平滑过渡。
• 添加鼠标点击点 uMouse uniform，使过渡从点击中心扩散。
• 加入顶点波动（Ripple）动画，在 vertex shader 中用正弦函数生成波形变形。
• 结合 GSAP Timeline 同步控制灰度和波纹周期。
• 管理多平面状态，实现点击切换与反向第二动画效果。

4. 纹理遮罩揭示（Texture Reveal Mask Effect）
• 引入双纹理 (uTexture, uTextureBack) 并使用 uMixFactor 控制混合。
• 通过鼠标 hover 事件，使用 Raycaster 定位交互对象。
• 在 fragment shader 中基于鼠标坐标生成圆形遮罩，平滑混合两张纹理。
• 悬停时 reveal 动画开启，离开时渐出还原。

5. 点击按压揭示（Click & Hold Mask Reveal）
• 通过 GSAP Observer 监听 onPress/onRelease/onMove，管理按压持续状态。
• 使用异步 Timeline 表现“按住充能—释放复位”的动画逻辑。
• shader 中使用噪声函数 (noise) 与 uTime 动态扰动 mask，制造液态波动感。
• 实现交互中的纹理扭曲、流动与时间关联视觉。

6. 动态模糊轮播（Dynamic Blur Effect Carousel）
• 结合 GSAP Draggable 与 ScrollTrigger 使轮播支持拖动与滚动同步。
• 计算每个平面到屏幕中心的距离，根据距离动态更新 uBlurAmount。
• 在 shader 中使用多重 Kawase 模糊算法，混合多层模糊采样和平滑区间。
• blur 与 scroll 动态联动，创造景深般的焦点模糊效果。

7. 总结与启发
• GSAP 为动画时序与交互逻辑提供流畅控制。
• Shaders 提供像素级视觉自由度与 GPU 实时渲染性能。
• 在 Web 前端中实现生动视觉，展现设计与技术融合的趋势。

AI 摘要：本文详细展示了使用 Framer Motion 在 React 项目中实现动画的方式，对比了传统 CSS 实现与 Framer Motion 的简洁 declarative（声明式）方式，并通过 Fade-In、Hover、List Staggering、Drag-and-Drop、Sortable List 等实例演示其强大功能。文章强调了 Framer Motion 的生产级特性（如 gestures、physics、variants、Reorder 等），并给出了初学和进阶的使用方向。

1. 为什么选择 Framer Motion
• 提供生产级动画解决方案，语法简洁，学习成本低
• 完美兼容 React 与 TypeScript，支持 declarative 宣告式写法
• 强大特性：drag 拖拽、spring 物理动画、scroll 动效、shared layouts

2. 开发环境准备与安装
• 使用 Vite 初始化 React + TypeScript 项目
• 使用 npm install framer-motion 安装依赖
• 提供 Demo 链接 便于快速试验

3. 动画实例逐步讲解
• 基本 Fade-In：对比 CSS keyframes 与 motion.div（initial/animate/transition）
• Hover 动画：对比 Tailwind hover/active 与 whileHover whileTap 的简洁写法
• List Staggering：传统 nth-child + 延迟 VS variants + staggerChildren 的声明式方案
• Drag-and-Drop：利用 drag、dragConstraints 等 props 快速实现拖拽，不需手写 DOM 监听
• Sortable List：利用 Reorder.Group 与 Reorder.Item 实现可排序列表的流畅交互

4. 总结与进阶提示
• Framer Motion 让复杂动画开发更直观和简洁
• 初学者可从 motion.div、animate、transition 入门
• 进阶可使用 AnimatePresence、Reorder、useMotionValue 等更高级功能
• 动画开发核心思想：声明式描述交互，而非命令式逻辑

Medium

Animating Elements through framer motion with React.js

Today, most of the website requirements you come across will ask for animations and effects. While you can definitely build animations with…

AI 摘要：本文介绍了 CSS 的新特性 @starting-style，它允许使用 transition 实现入场动画，但作者指出该特性存在严重的 specificity（优先级）陷阱，使得动画常常无法按预期运行。作者对比了 @starting-style 与传统的 keyframes，分析了具体问题案例，并提出三类解决方案：使用 !important、借助 CSS custom properties（变量）、退回到 keyframes。整体结论是：虽然 @starting-style 看似简化了写法，但 keyframe 动画依然更稳定、通用且易于维护。

Joshwcomeau

The Big Gotcha With @starting-style • Josh W. Comeau

CSS has been on fire lately, with tons of great new features. @starting-style is an interesting one; it allows us to use CSS transitions for enter animations, something previously reserved for CSS keyframe animations. But is the juice worth the squeeze?

AI 摘要：文章介绍了使用 SVG 动画 作为 GIF 动画 替代方案的优势。与 GIF 相比，SVG 动画文件体积更小、分辨率无损放大、与部分 CSS 媒体查询兼容，还可以直接嵌入 img 标签或作为背景图使用。但也存在局限：如不支持 prefers-reduced-motion、无法触发交互事件（hover/click）、限制 JavaScript 等。整体上，SVG 动画是 GIF 的现代替代，尤其适用于形状移动或变换类动画，性能和画质优势明显。

Frontend Masters

Replace Your Animated GIFs with SVGs

No one loves dancing hamster GIFs more than I do. But all those animated frames can add up to files so large you don’t even see the dancing hamster. Your other tab has already loaded and you’ve followed the dopamine hits down another social media rabbit hole.

AI 摘要：文章探讨了 UI 动画在交互设计中的价值与风险，提出动画必须有明确目的，且要考虑交互频率与速度感知。作者强调：合适的动画能提升可预测性与愉悦感，不合理的动画则会破坏效率与信任。有时，最佳的“动画”就是没有动画。

1. 动画的双刃性
• 正确使用动画可让界面更自然、流畅、愉快
• 滥用动画则会使界面显得缓慢、不确定，甚至损害用户信任

2. Purposeful Animations（有目的的动画）
• 动画需服务于具体功能或信息传达，而非纯粹装饰
• 案例：Linear 用动画展示功能逻辑；按钮点击缩放增强响应感
• 动画可营造 delight（愉悦），但仅适合低频使用，避免变成负担

3. Frequency of Use（使用频率）
• 高频操作（如 Raycast 命令输入、键盘快捷键）不应使用动画，否则会拖慢效率
• 低频操作可适度加入动画，提高体验的独特性和愉悦感
• hover 或菜单切换等高频交互场景更适合零动画或极快动画

4. Perception of Speed（速度感知）
• 动画速度需足够快，保持用户与界面的即时连接
• 一般 UI 动画时长应低于 300ms
• 案例：下拉菜单在 180ms 内更灵敏，tooltip（提示框）应有初始延迟但切换时不应再延迟

5. 设计原则与结论
• 动画不是必然元素，而是用户体验的加速器或负担
• 最佳实践：以用户需求为导向，基于目的、使用频率和性能感知来判断是否加入动画
• 有时，没有动画，才是最好的设计

Emil Kowalski

Why you are animating more often than you should.