滚动驱动动画创作台 - 基于Scroll Timeline的可视化

动画设计工具 CSS Scroll Timeline 动画滚动驱动

滚动驱动动画创作台

Scroll Timeline

点击预览区中的彩色方块可选中并配置其动画参数滚动: 0%

动画配置未选中

动画类型

动画起始滚动位置 25%

动画结束滚动位置 75%

缓动函数 (Easing)

动画强度 100%

CSS 代码

/* 点击元素查看对应CSS代码 */

使用现代CSS animation-timeline: scroll() 语法，需Chrome 115+或启用实验性功能。

常见问题与知识点

Scroll Timeline 是 CSS 的新特性，允许动画不再依赖时间（秒），而是根据滚动条的滚动位置来驱动。通过 animation-timeline: scroll() 或 animation-timeline: view()，动画的进度与页面或容器的滚动进度直接关联，实现丝滑的滚动驱动效果。它是 CSS Scroll-linked Animations 规范的一部分。

scroll() 基于滚动容器的整体滚动进度，从0%到100%映射整个可滚动范围，适合视差效果等全局动画。
view() 基于元素与视口的交叉进度，当元素进入视口时开始，离开时结束，适合滚动触发的入场/出场动画。本工具主要模拟 scroll() 的行为。

在本工具中，选中任意动画元素后，在右侧配置面板中拖动"动画起始滚动位置"和"动画结束滚动位置"滑块。起始位置决定动画何时开始，结束位置决定何时完成。CSS中使用 animation-range 属性来实现相同的效果，例如 animation-range: 25% 75%;。

截至2025年，Chrome 115+ 和 Edge 115+ 已完整支持 Scroll Timeline。Firefox 和 Safari 仍在开发中。对于生产环境，建议使用 @supports (animation-timeline: scroll()) 进行特性检测，并配合JavaScript polyfill（如本工具演示的方式）作为降级方案。

当然！本工具支持多个动画元素各自独立配置。每个元素都可以设置不同的动画类型、触发范围和缓动函数。在CSS中，也可以为不同元素定义不同的 @keyframes 并绑定到相同的滚动时间线，实现丰富的交错动画效果。

CSS Scroll Timeline 动画运行在合成器线程上，不阻塞主线程，帧率更高、更流畅。传统JavaScript滚动监听需要在主线程计算样式，容易导致卡顿。本工具使用JS模拟是为了兼容性展示，但实际生产环境推荐优先使用原生CSS方案。

滚动驱动动画生成器 - Scroll-timeline代码

配置基于滚动位置触发的CSS @scroll-timeline动画，复制适配代码。

前端设计 CSS 动画滚动

滚动驱动动画沙盒 - Animation Timeline演示

绑定动画进度到滚动位置，交互式调整参数，直观理解scroll-timeline和view-timeline。

前端设计 CSS 动画滚动驱动

滚动吸附生成器 - 全屏滚动页面模板

配置多屏垂直或水平滑动卡片，生成带CSS Scroll Snap的HTML页面代码。

前端设计 CSS 模板滚动吸附

最新

CSS overscroll-behavior 演示 - 控制滚动链接效果

切换 overscroll-behavior 属性值，观察嵌套滚动容器到达边界时的不同行为。

CSS CSS overscroll-behavior 滚动演示

Lottie动画预览器 - 拖放JSON查看动效

加载Lottie动画JSON文件，播放并控制速度、方向，预览动效效果。

前端设计 Lottie 动画预览

文本高亮效果生成器 - 荧光笔/下划线动画

制作像荧光笔划过的高亮背景或扫描下划线效果，导出类名。

CSS CSS 下划线文字高亮

CSS缓动函数试玩场 - 所有预设一览

并列播放所有CSS内置缓动函数（ease, linear等）的动画效果，方便对比选择。

前端设计 CSS 动画缓动

最新

Animation Worklet 演示 - 基于工作线程的高性能动画

创建并运行动画工作线程，展示不受主线程影响的平滑动画效果。

动画 Animation Worklet Houdini 动画高性能

CSS鼠标样式生成器 - 自定义光标图形

绘制或上传一个小图像，生成可用的.cur或内联SVG鼠标指针CSS代码。

前端设计 CSS 光标生成

复古终端样式生成器 - 绿色字符CRT效果

生成具有扫描线、荧光拖影和屏幕弯曲效果的纯CSS复古电脑终端样式。

前端设计 CSS 复古终端

悬停提示框生成器 - 纯CSS/JS气泡样式定制

选择触发位置、箭头方向与样式，生成轻量悬停提示框代码。

开发工具 CSS tooltip 提示框生成

滚动文字横幅生成器 - 替代 marquee 标签

设置文字、速度和方向，生成使用 CSS 动画实现的滚动横幅代码。

CSS CSS 文字横幅滚动

OffscreenCanvas性能演示 - Worker中绘图对比

分别使用主线程Canvas和OffscreenCanvas在Worker中渲染动画，对比FPS和流畅度。

开发工具 Canvas Worker 性能

CSS 滚动条样式生成器 - ::-webkit-scrollbar 自定义美化

通过可视化控件定制滚动条轨道、滑块、按钮等伪元素样式，即时预览并复制生成代码。

开发工具 CSS 滚动条生成器美化

Catmull-Clark 细分曲面演示 - 控制网格迭代

载入简单控制网格，执行 Catmull-Clark 细分一次，观察光滑效果。

图形学 Catmull-Clark 图形学曲面细分

纯CSS提示框生成器 - 鼠标悬停气泡代码

自定义箭头方向、颜色、大小和动画，生成无需JavaScript的纯CSS tooltip组件代码。

前端设计 CSS 提示框生成器

CSS Grid 调试覆盖层 - 显示网格线与区域

在页面上叠加可拖拽的半透明网格线，辅助网格布局对齐。

开发工具 Grid 可视化覆盖层调试

新拟态设计生成器 - CSS Neumorphism样式代码

调节光源角度、颜色和距离，生成凹凸柔和的新拟态UI元素CSS盒阴影代码，潮流设计工具。

前端设计 CSS Neumorphism 新拟态

预设动画库 - 常用CSS关键帧

浏览并一键复制常见CSS动画（跳动、淡入、滑动等）的@keyframes代码。

前端设计 CSS 关键帧动画

视差层构建器 - 多层滚动的HTML模板

配置多个背景层或前景层，设定各层滚动速度因子，生成完整视差页面代码。

前端设计模板滚动视差

最新

@property 规则演示 - 自定义属性类型与动画

注册带类型的 CSS 自定义属性，观察其如何支持过渡动画和继承效果。

CSS CSS @property 动画

Etch A Sketch电子画板 - 旋钮控制绘图

模拟经典玩具，按方向键或虚拟旋钮绘制线条，按空格键晃动清除。

休闲怀旧涂鸦画板

图片幻灯生成器 - 序列帧转视频WebM

上传一组图片，设定每张展示秒数和转场，生成WebM视频幻灯。

媒体工具幻灯生成视频

最新

Cypress 测试场景构建器 - 点选生成测试代码

可视化选择操作（访问、点击、断言等），自动生成 Cypress 测试代码。

开发工具 Cypress 场景构建器测试

最新

CSS Contain 属性演示 - 观察布局/样式/尺寸限制效果

应用 contain 的各种值（layout, paint, size），直观对比开启前后渲染和布局的变化。

CSS contain CSS 性能隔离

范围滑块样式生成器 - 自定义input range外观

可视化配置范围滑块的轨道、滑块、填充颜色，生成跨浏览器的CSS代码。

前端设计 CSS 样式滑块

CSS 光标样式预览工具 - 所有内置光标效果展示

列出所有标准 CSS 光标值（pointer, grab, zoom-in 等），鼠标悬停实时查看对应光标样式并复制代码。

参考 CSS 光标参考预览

内存分页替换模拟 - FIFO/LRU/OPT动画

设定物理页框数，输入页引用串，动画展示不同页面置换算法的缺页率。

教育工具分页模拟算法

Tailwind 调色板可视化浏览器 - 所有色阶一览

可视化浏览 Tailwind CSS 所有内置颜色的 50-950 色阶，点击复制类名或色值。

CSS Tailwind 浏览调色板颜色

像素绘板 - 网格填色与动画帧

在可缩放网格上选区颜色绘制像素图，支持多帧预览简单动画。

艺术像素动画绘图艺术