精通 CSS `animation-timeline`：基于滚动或视图的动画控制

CSS `animation-timeline`：让你的网页动画像电影一样，随心所动

各位看官，大家好！今天咱们聊点新鲜玩意儿，关于CSS动画的。说起CSS动画，大家肯定不陌生，那些漂浮的元素，旋转的按钮，淡入淡出的文字，哪个网站还没几个动画撑撑场面？

但是，传统的CSS动画，就像上了发条的玩具，一开始就停不下来，只能按照预设好的时间轴，一丝不苟地表演。这就像看一部电影，你只能从头看到尾，不能快进，不能倒退，更不能根据自己的心情来控制剧情的进度。

是不是觉得有点无聊？

别急，CSS animation-timeline 这个神奇的属性，就是来拯救我们的。它能让我们的动画，不再是“一次性消费品”，而是能根据用户的滚动或者元素在屏幕上的位置，实时调整播放进度。就像我们有了遥控器，可以随时掌控电影的播放。

啥是 animation-timeline？它能干啥？

简单来说，animation-timeline 就是告诉浏览器，你的动画要跟着谁的节奏跳舞。这个“谁”，可以是整个文档的滚动条，也可以是某个元素在视口中的位置。

有了它，我们可以实现很多炫酷的效果：

滚动视差动画： 当你滚动页面的时候，不同的元素以不同的速度移动，营造出一种景深效果，就像电影里的背景分层移动。
滚动进度条动画： 进度条不再只是简单地填满颜色，而是可以像一个生动的角色，随着你的滚动，一步一个脚印地前进。
元素入场动画： 当某个元素进入视口时，动画才开始播放，离开视口时动画暂停，让网页内容更有呼吸感。
“粘性”动画： 让动画和滚动条紧密结合，就像磁铁一样，你滚动多少，动画就执行多少。

怎么样，听起来是不是很兴奋？接下来，咱们就一步一步地学习，如何玩转这个 animation-timeline。

animation-timeline 的两种主要类型：scroll() 和 view()

animation-timeline 主要有两种类型：scroll() 和 view()。它们分别对应两种不同的时间轴：

scroll()：基于滚动条的动画

scroll() 函数让动画的播放进度，与指定滚动容器的滚动位置相关联。你可以指定整个文档的滚动条，也可以指定某个元素的滚动条。

举个例子，假设我们有一个进度条，我们希望它随着页面的滚动而填充：
```
.progress-bar {
    width: 100%;
    height: 20px;
    background-color: #eee;
}

.progress-bar-inner {
    width: 0%;
    height: 100%;
    background-color: #4CAF50;
    animation: fill-progress;
    animation-timeline: scroll(); /* 关键：指定滚动条作为时间轴 */
    animation-range: 0vh 100vh; /* 可选：指定动画的起始和结束滚动位置 */
    animation-fill-mode: forwards; /* 可选：动画结束后保持最后一帧的状态 */
}

@keyframes fill-progress {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}
```
在这个例子中，animation-timeline: scroll() 告诉浏览器，fill-progress 动画的播放进度，要根据整个文档的滚动条来决定。animation-range: 0vh 100vh 则指定了动画的起始和结束位置，分别对应于页面顶部和页面底部。也就是说，当你从页面顶部滚动到页面底部时，进度条会从 0% 填充到 100%。

scroll() 函数的参数：
- root: 指定滚动容器。默认为整个文档 (document)。你可以使用 CSS 选择器来指定特定的滚动容器，比如 scroll(root: '.scrollable-container')。
- orientation: 指定滚动方向。可以是 block (垂直滚动，默认值) 或 inline (水平滚动)。
view()：基于元素在视口中的位置的动画

view() 函数让动画的播放进度，与元素在视口中的位置相关联。你可以根据元素进入和离开视口的情况，来控制动画的播放。

举个例子，假设我们有一个元素，我们希望它在进入视口时淡入：
```
.fade-in-element {
    opacity: 0;
    animation: fade-in;
    animation-timeline: view(); /* 关键：指定视口作为时间轴 */
    animation-range: entry 25% cover 75%; /* 可选：指定动画的起始和结束视口位置 */
    animation-fill-mode: both; /* 可选：动画在进入和离开视口时，保持相应的状态 */
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
```
在这个例子中，animation-timeline: view() 告诉浏览器，fade-in 动画的播放进度，要根据元素在视口中的位置来决定。animation-range: entry 25% cover 75% 则指定了动画的起始和结束位置：
- entry 25%: 当元素进入视口的 25% 时，动画开始播放。
- cover 75%: 当元素覆盖视口的 75% 时，动画播放完毕。
view() 函数的参数：
- root: 指定视口。默认为浏览器的视口。你可以使用 CSS 选择器来指定特定的视口，比如 view(root: '.viewport-container')。
- inset: 指定视口的内边距。可以用来调整动画的触发区域。

animation-range：控制动画的起止位置

animation-range 属性，就像电影的剪辑师，它决定了动画在时间轴上的起止位置。你可以根据自己的需求，精确地控制动画的播放范围。

animation-range 可以接受两个值：start 和 end。这两个值可以是：

长度单位 (例如：0px, 100vh, 200%)： 表示在滚动容器或视口中的绝对位置。
关键字 (例如：entry, exit, cover, contain)： 表示元素相对于滚动容器或视口的位置。
百分比 (例如：25%, 75%)： 表示元素相对于滚动容器或视口的大小的百分比。

这些关键字和百分比可以组合使用，来创建更复杂的动画效果。例如：

entry 25%: 表示当元素进入视口的 25% 时。
exit 75%: 表示当元素离开视口的 75% 时。
cover 50%: 表示当元素覆盖视口的 50% 时。
contain 25%: 表示当元素包含视口的 25% 时。

一些小技巧和注意事项

animation-fill-mode： 这个属性可以控制动画在播放之前和之后的状态。常用的值有：
- forwards: 动画结束后保持最后一帧的状态。
- backwards: 动画开始前应用第一帧的状态。
- both: 同时应用 forwards 和 backwards 的效果。
性能优化： animation-timeline 可能会影响页面的性能，特别是当你的动画比较复杂或者滚动容器比较大的时候。为了优化性能，你可以尝试以下方法：
- 使用 will-change 属性来告诉浏览器，哪些属性会发生变化。
- 避免在动画中使用复杂的 CSS 属性，比如 box-shadow 和 filter。
- 尽量减少动画元素的数量。
浏览器兼容性： animation-timeline 是一个相对较新的 CSS 属性，目前并非所有浏览器都完全支持。在使用之前，请务必检查浏览器的兼容性。

总结

CSS animation-timeline 就像一把瑞士军刀，它能让你在控制动画方面拥有更多的自由度和灵活性。虽然学习起来可能需要花一些时间，但是一旦掌握了它，你就能创造出令人惊艳的网页动画效果。

希望这篇文章能帮助你更好地理解和使用 animation-timeline。记住，实践是最好的老师，多尝试，多 экспериментировать，你一定会成为动画大师的！

最后，祝大家编码愉快！

CSS animation-timeline：让你的网页动画像电影一样，随心所动

发表回复 取消回复

CSS `animation-timeline`：让你的网页动画像电影一样，随心所动

发表回复取消回复