原创 Embrace 2025-01-03 08:31 重庆
点击关注公众号，“技术干货” 及时达！
❝这是整个掘金社区绝仅有的讲解，学好它你将逐渐摆脱JavaScript，减少对库的使用，极大提高了你网站的渲染速度
❞
前言
作为前端工作人员， 滚动动画大家再也熟悉不过。不过很多前端工程师对于这块的实现是头疼的。这里我准备了iphone16官网来作为例子，https://www.apple.com/iphone-16-pro/
我看了很多工作几年的前端工程师，95%都要使用大量JavaScript，甚至是库来实现。
我们都知道JavaScript相关的操作，对于浏览器进行渲染是非常不利的。我看到那些代码，我都为浏览器需要渲染它感到心痛??
如果您也是其中的一员，那么这篇文章将颠覆你以前的做法，提高你的coding水平，并且代码量也不多。
正式讲解
❝很多页面效果因为做成了gif被抽帧了，这我也没办法，大家懂我意思就行
❞
❝全文不长，请大家耐心看完，你会拥有巨大的收获???。
❞
第一个动画，随着页面滚动进行旋转
我这里自己准备了一个网页，首先看这里
我们如何让网页这个球随着我们滑动网页转动起来？你的想法是不是用JavaScript监听滚动时间然后……?
抱歉不需要，我们只需要CSS几行代码搞定，这里我准备讲解两个动画案例带你彻底搞懂，诸君且看我如何操作。
<figure><img src="images/3.png" alt="" class="autoRotate"></figure>
.autoRotate{animation: autoRotateAnimation;animation-timeline: view();}@keyframes autoRotateAnimation{from{transform: rotate(0deg);}to{transform: rotate(360deg);}}
.autoRotate{animation: autoRotateAnimation;}
这段代码我想不说大家也知道，给类名叫定义了叫autoRotate的元素定义一个叫autoRotateAnimation的动画。
@keyframes autoRotateAnimation{from{transform: rotate(0deg);}to{transform: rotate(360deg);}}
这段代码就是动画的具体实现，表示该动画会从 0 度旋转到 360 度，从而使元素绕其中心点顺时针旋转一圈。
运行后，我们发现并没有动
❝重点来了，请大家打起精神！?
❞
animation-timeline: view();
为什么会这样？?因为通常情况下，我们进行动画活动都需要添加动画的时间线，也就是动画发生的时机，这里我们只是说了动画要怎么做而已。
❝那我们怎么解决呢？?我们只需要加一行代码就可以了
❞
animation-timeline: view();Perfect!动起来了！是不是比用JavaScript简单多了？我们来解释下这段代码什么意思
animation-timeline用于指定动画的时间线，view()，它可以使动画的时间线基于视口的滚动或其他动态因素进行控制。
❝这段代码可以令我们做到根据页面的滚动视图来「自动」控制动画的开始、暂停或进度。
❞
文字随着页面滚动出现
很多时候我们需要文字随着页面滚动到一定位置的时候才出现，我们该怎么做呢？通过上面的讲解，大家肯定能反应到我们可以用animation-timeline: view();
<h2 class="autoShow">Introduce</h2>.autoShow{animation: autoShowAnimation;animation-timeline: view();}@keyframes autoShowAnimation{from{opacity: 0;transform: translateY(200px) scale(0.3);}to{opacity: 1;transform: translateY(0) scale(1);}}
我们可以看到文字出现时刚好上面的球转我一圈，那种局限性太大了，并且动画效果消失后我们要划到很后面，假如还有其他动画效果我们根本就无法看到，这太糟糕了??。
我们有没有办法指定文字出现的时机呢？当然有，只需要在view()里面填写参数即可。
view的两个参数
❝为了写这个我看MD5文档看了有几个小时，我只能说，大家把英语学好吧，依靠浏览器翻译，呵呵……很难去学习到新技术。
❞
上面那个案例不好演示效果，这里我重新写了一个,用这个更好演示。
<div class="content"><h1>Content</h1><p>...此处省略一大段文字</p><p>...此处省略一大段文字</p><div class="subject-container"><div class="subject animation"></div></div><p>...此处省略一大段文字</p></div>
...此处省略一大段布局代码.animation {animation-timeline: view(block auto 20%);animation-name: grow;animation-fill-mode: both;animation-duration: 1ms; /* Firefox requires this to apply the animation */animation-timing-function: linear;}@keyframes grow {from {transform: scaleX(0);}to {transform: scaleX(1);}}
❝补充一下，「
❞block」：表示相对于 「块级轴」（通常是垂直方向，或称为“y 轴”）的定位，这个不做详细介绍，不是这篇文章的重点。
控制动画开始时机
animation-timeline: view(block auto 20%);
20%表示等而目标元素的「顶部」距离「视口高度底部」20%的时候才会开始执行动画，不直观我们直接看图。
控制动画结束时机
❝我们知道了控制动画开始，如何控制动画什么时机结束呢??
❞
animation-timeline: view(block 50% auto);
这里的50%表示目标元素的「底部」距离「视口高度顶部部」50%的时候才会结束动画执行，这么说不直观我们直接看图
知道了这些我们就可以进行骚操作
.autoShow{
animation: autoShowAnimation both;
animation-timeline: view(50% 5%);
}
是不是和你在很多网页上的效果很像??？我们不用JavaScript代码就实现了?，这简直泰裤辣！
关于代码什么意思相信大家都知道这是什么意思了，表示目标元素远底部距离视口高度顶部50%结束动画，目标元素顶部距离视口底部5%开始动画。
❝注意：上面的讲解都是从上往下滑动，如果你是从下往上滑动，把这些结论返回来理解就行。
❞
both
现在我们给所有文字添加上animation-timeline: view(75% 20%);
❝诶嘿?这是怎么回事??我们发现我们从上往下滑动没事，但是从下往上滑的时候有段文字很突兀，它是瞬间出现的，这显然是很不优雅的。
❞
❝如何解决呢？?难道终于要使用JavaScript吗？
❞
哈哈?，其实我们也只需要加一个代码both
animation: autoShowAnimation both;animation-timeline: view(40% auto);
发现此时不会出现瞬间出现的问题了。
现在我们来解释在both是什么：both 是 animation-fill-mode 的一个值，它表示动画将在动画执行前和执行后都应用动画的效果。
使用这种 both 填充模式，可以「确保元素在动画前后都具有相应的样式」，为元素的显示提供更流畅的过渡效果，「避免了动画结束后元素突然回到初始状态或未应用动画开始前样式的问题」。
总结
学好英语?，为了解释这些概念，我因为英语不好误解了将近2个多小时。
animation-timeline用于指定动画的时间线。
view()，它可以使动画的时间线基于视口的滚动或其他动态因素进行控制。
知道了如何使用view()控制动画的开启和结束
点击关注公众号，“技术干货” 及时达！
