说实话,CSS滚动驱动动画这东西,以前咱就是说完全依赖JavaScript来实现滚动特效,你懂的,写那么一大堆代码,现在好了,有CSS救场了,哈哈!

咱先聊聊这个CSS滚动驱动动画是个啥,它Neng让元素的动画进度与滚动位置绑定,无需JavaScript,这就意味着性Neng优化和兼容性dou有保障,你懂的,不用再担心那些复杂的JavaScript代码了。

在开始制作动态滚动效果之前,我们需要了解一些CSS动画的基础知识。

是@keyframes规则,这是一个CSS3动画的核心部分,通过它我们Ke以定义动画的关键帧。

然后是animation属性,使用@keyframes定义动画的关键帧,并通过animation属性将动画应用到元素上,Ke以轻松实现滚动效果。

animation属性是一个简写属性,用于设置六个动画属性：

animation: name duration timing-function delay iteration-count direction;

比如animation: grow-progress linear;,这里grow-progress是动画名称,linear是时间函数,表示动画的速度曲线。

scroll 创建一个滚动时间线，将动画进度与滚动位置关联。

animation-timeline: scroll;

参数：

/* Zui近的滚动祖先，垂直方向 */animation-timeline: scroll;/* 根滚动容器，水平方向 */animation-timeline: scroll;/* 元素自身，垂直方向 */animation-timeline: scroll;

害,这个scroll函数hen强大,Ke以指定不同的滚动容器和方向,你Ke以根据需求调整。

<div class="progress-bar"></div>

.progress-bar { position: fixed; top: ; left: ; height: 4px; background: linear-gradient; transform-origin: left; animation: grow-progress linear; animation-timeline: scroll;}@keyframes grow-progress { from { transform: scaleX; } to { transform: scaleX; }}

效果：进度条宽度随页面滚动增长。

.parallax-bg { position: fixed; top: ; width: %; height: 100vh; z-index: -; animation: parallax linear; animation-timeline: scroll;}@keyframes parallax { to { transform: translateY; }}

这个视差效果挺酷的,你Ke以试试调整%,kankan不同的效果,哈哈!

view 创建一个视图时间线，当元素进入/离开视口时触发动画。

animation-timeline: view;

/* 元素进入视口时触发 */.element { animation: fade-in linear; animation-timeline: view;}/* 设置触发范围 */.element { animation: fade-in linear; animation-timeline: view; /* 在视口上下 % 的范围内触发 */} 六、animation-range

控制动画在滚动范围内的哪个阶段执行。

.element { animation: fade-in linear; animation-timeline: view; animation-range: entry % entry %; /* 只在进入阶段执行动画 */}

.card { slide-in linear, rotate linear; entry % entry %, entry % entry %; @keyframes slide-in { from { transform : translateX; to { transform : translateX; @keyframes rotate { transform : rotate; transform : rotate; 说实话,这些组合使用技巧挺强大的,Ke以实现各种复杂的动态效果,你Ke以试试kan。