CSS 滚动驱动动画与 @keyframes 新语法

已于 2023-10-28 09:17:54 修改
阅读量701 收藏 1
点赞数
分类专栏： css 文章标签： css 前端 动画 滚动动画
于 2023-10-28 09:17:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/broken_promise/article/details/134087403
版权
本文介绍了CSS中@keyframes的新特性，支持timeline-range-name，使得开发者可以更精确地控制动画的起始和结束点。作者通过示例展示了如何利用新语法调整动画范围，并提到了entry和exit的概念以及与animation-range的结合使用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

CSS 滚动驱动动画与 @keyframes

在 CSS 滚动驱动动画相关的属性出来之后, @keyframes 也迎来变化.

以前, @keyframes 的值可以是 from, to, 或者百分数. 现在它多了一种属性的值 <timeline-range-name> <percentage>

建议先了解 animation-range 不然你会对 timeline-range-name 感到陌生.

例子

我们先看看在新语法出现之前怎么写的. 我们用 from(也就是 0%) 表示动画开始祯, to(100%) 表示动画结束祯

<div class="scroller">
  Lorem ...
  <div class="box"></div>
  Lorem ....
</div>

.scroller
最低0.47元/天 解锁文章
前端领域：PostCSS与CSS过渡库的结合使用
前端视界的博客
05-20 987
本文旨在为前端开发者提供PostCSS与CSS过渡库结合使用的全面指南，涵盖从基础概念到高级应用的完整知识体系。我们将重点探讨如何利用PostCSS的插件系统增强CSS过渡功能，以及如何与专业CSS动画库协同工作。文章将从基础概念入手，逐步深入到高级应用和性能优化。我们将首先介绍PostCSS和CSS过渡库的核心概念，然后详细讲解配置方法和集成技术，最后通过实际案例展示最佳实践。PostCSS：一个用JavaScript转换CSS的工具，通过插件系统提供各种CSS处理功能。
CSS animation动画实现无限滚动
qq_39772898的博客
07-26 4963
CSS animation动画实现无限滚动
CSS文本滚动动画
臧小川的博客
04-06 215
【代码】CSS文本滚动动画。
CSS动画实现滚动播放
weixin_30706691的博客
06-15 1561
通过CSS3动画实现内容在特定区域滚动播放，当鼠标指上去的时候停止滚动 这里是ul列表内容总共十张图片，但是为了播放的连续性，又复制了一份li，这样就不会出现间断 通过animation-play-state:paused实现鼠标指上去停止滚动播放 给ul列表加了display：flex让li横向排列 说明：CSS里设置的100%时候向左移动的1200px是原来的一份ul的宽度，也就是下面...
css动画-滚动出现效果
Joyce的博客
07-31 1068
效果如下：随着画面滚动，元素逐渐显示出现在屏幕中。
html中一些简单的css动画 包括滚动进度条 滑动动画
haodanzj的博客
11-20 1133
简单的cssdemo
CSS 滚动驱动动画 timeline-scope
broken_promise的博客
10-21 710
TOC/TOC。
QQ频道单行多条信息滚动特效代码
03-20
使用模板引擎（如Handlebars或Vue.js的模板语法）可以方便地将数据与HTML结构绑定，实现数据驱动的视图更新。 5. **性能优化**：当消息数量较大时，一次性加载所有消息可能导致页面卡顿。可以采用虚拟滚动技术，只...
11个表白网页制作特效，灵活运用css、js和jq
01-25
2. **JavaScript**：JavaScript是网页动态功能的主要驱动者，它能够与用户交互、更新内容、控制多媒体等。 - `事件处理`：监听用户操作，如点击、滚动等，触发相应的特效。 - `DOM操作`：通过`document....
css实现自动滚动效果
weixin_43410094的博客
06-02 4435
css实现自动无限滚动+悬浮停止滚动效果
用css动画实现无缝滚动效果
qq_40019058的博客
11-15 433
做无缝滚动效果，从来一个superslide搞定一切，但平凡的某一天，UI提出了一个问题：这块一直在抖动啊。我定睛一看：确实是在抖，这……找了其他的插件，效果都不尽如人意。最后，参考蓝湖，用css动画实现。
前端：CSS滚动视图动画实现：屏幕滚动时触发动画
2301_80820432的博客
07-30 1666
但是要注意的是此功能是css3的新实验功能，目前仅 Chrome Canary (115以上)版本浏览器支持此特性，view()代表了进入视图窗口后的监听，scroll()代表了滑动的监听，例如scroll(root x)表示使用最外层的x轴的滚动条的滚动进度，scroll(root y)使用滚动容器的 y 轴上的滚动进度，这里使用的是view()参数。其中entry 0 表示的是进入的时候是0，cover 30%，就是视图进入30%的时候是动画结束帧。这个也是css的新特性，代表的是动画的持续范围。
css3实现动态滚动播放列表
xxx_holic123的博客
08-09 1563
需要自动滚动循环播放的列表，使用纯CSS实现基础循环功能。
css中怎么给div设置一个从上到下的滚动动画
m0_68094390的博客
05-15 5493
在上面的代码中，scroll-div是需要滚动的div，设置了固定的高度和overflow:hidden属性。然后定义了一个名为scroll的动画，使用translateY()函数实现从上到下的滚动效果。首先，给需要滚动的div设置一个固定的高度和overflow属性为hidden，这样可以隐藏超出高度的内容。在@keyframes中，定义从上到下的滚动动画，可以使用translateY()函数来实现垂直方向的移动。可以使用CSS的动画属性来实现从上到下的滚动动画。
【CSS Tricks】鼠标滚轮驱动css动画播放，使用js还是css？
最新发布
qbbmnnnnnn的博客
10-10 2267
animation-timeline，目前还处于试验阶段。指定用于控制CSS动画进度的时间轴。CSS的创建者曾说过，他最初的设想是CSS作为控制网页行为的主要Web技术。只有当CSS无法完成控制行为时，才使用js脚本作为后备手段。如果在不考虑浏览器支持性的前提下（优先使用chrome最新版本浏览器），项目中有做滚动条绑定动画的需求，我非常建议大家尝试一下，它会给你一种全新的开发体验，在实现相同效果的情况下，页面性能优化最佳。再接再厉~
纯css实现无限循环滚动logo墙
lemon的博客
08-24 1557
文章目录一、需求二、实现1、marquee标签2、css3动画完整示例代码：三、局限性 一、需求 在许多网站的合作伙伴一栏，常常会看到一排排无限地循环滚动的logo墙。 不久前，接到一个类似的需求。需求如下： 1、无限循环滚动； 2、鼠标hover后，暂停滚动，鼠标离开后，继续滚动； 3、支持从左往右和从右往左滚动； 4、滚动速度需要可配置。 简单动画，我们先尝试只使用css实现。 二、实现 1、marquee标签 说到无限循环滚动，很久以前marquee标签可以实现类似的功能，它可以无限循环滚动，并且可
CSS3 -- @keyframes动画
qq_51248309的博客
05-04 7008
一篇文章教会你css3中的动画
CSS3 用动画实现无缝滚动图效果
热门推荐
xiongmouren_jy的博客
05-12 1万+
使用CSS3 实现无缝滚动窗口效果
CSS 滚动驱动动画 scroll()
broken_promise的博客
09-03 2159
通过scroll()指定可滚动元素与滚动轴来为容器动画提供一个匿名的通过元素在顶部和底部(或左边和右边)的滚动推进. 并且元素滚动的位置会被转换为百分比, 滚动开始被转化为0%, 滚动结束被转化为100%如果scroll()指定的滚动轴不包含滚动条, 也就是元素在滚动轴的方向不可滚动, 那么timeline的进度为0%
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值