AI 摘要：本文介绍了一种使用 CSS animation-timeline 和自定义属性实现现代滚动阴影效果的新方法，通过 CSS 遮罩（mask）替代传统阴影，实现跨背景兼容的水平滚动元素边缘渐变效果，无需 JavaScript 且支持优雅降级。

1. 背景介绍
• 传统方法：通过背景渐变叠加实现滚动阴影（Chris Coyier 曾推荐）
• 新方法：Geoff 使用 animation-timeline 绑定滚动位置与伪元素透明度动画

2. 新方案核心
• 改用 CSS 遮罩（mask）淡出可滚动元素边缘
• 优势：适配深浅背景、无需独立边框，适合水平滚动场景（如表格）

3. 实现步骤
• 可滚动元素初始化
• 示例：响应式差的水平滚动表格
• 使用线性渐变遮罩代码：

.scrollable {
mask: linear-gradient(to right, #0000, #ffff 3rem calc(100% - 3rem), #0000);
}

• 自定义属性与动画定义
• 通过 @property 声明 --left-fade 和 --right-fade 属性
• 关键帧动画控制两侧淡入淡出范围（0-10% 左端动画，90-100% 右端动画）
• 动画与滚动时间轴绑定
• 将 scroll-timeline 关联到 animation-timeline

4. 兼容性与扩展
• 目前 Safari 不支持 animation-timeline，但会优雅降级（无渐变效果）
• 适用场景：滚动吸附（scroll-snap）轮播或卡片组件

5. 总结
• 结合 CSS 新特性（自定义属性动画 + animation-timeline）实现实用效果
• 强调 CSS 近年来的进步：无 JavaScript 依赖、内容无关性

CSS-Tricks

Modern Scroll Shadows Using Scroll-Driven Animations | CSS-Tricks

Using scroll shadows, especially for mobile devices, is a subtle bit of UX that Chris has covered before. Geoff covered a newer approach that uses the animation-timeline property. Here’s yet another way.