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

原创 已于 2023-10-28 09:17:54 修改 · 777 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端 #动画 #滚动动画

于 2023-10-28 09:17:40 首次发布
本文介绍了CSS中@keyframes的新特性，支持timeline-range-name，使得开发者可以更精确地控制动画的起始和结束点。作者通过示例展示了如何利用新语法调整动画范围，并提到了entry和exit的概念以及与animation-range的结合使用。

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元/天 解锁文章
CSS Variables 驱动的动态变形与动画
weixin_41455464的博客
07-01 279
CSS变量就像一个万能的工具，可以让你更加灵活地控制CSS样式，实现各种各样的动态变形和动画效果。它不仅可以提高代码的可维护性，还可以激发你的创意，让你创造出更加炫酷的网页。所以，各位看官，赶紧拿起你的键盘，开始探索CSS变量的奇妙世界吧！相信你一定会发现，它比你想象的还要强大！
CSS animation动画实现无限滚动
qq_39772898的博客
07-26 5100
CSS animation动画实现无限滚动
CSS文本滚动动画
臧小川的博客
04-06 265
【代码】CSS文本滚动动画。
在VUE3中使用CSS动画实现无缝轮播鼠标移入暂停
qq_45820271的博客
11-13 2393
首先，使用v-for生成需要轮播的数据,通过计算得到移动的距离与时间。然后在CSS中让它动起来。采用动画播放结束回归原位后刷新class,每个BOX需要移动的距离和时间则通过计算得到。通过animation-play-state: paused让鼠标移入时暂停
CSS3 用动画实现无缝滚动图效果
热门推荐
xiongmouren_jy的博客
05-12 1万+
使用CSS3 实现无缝滚动窗口效果
CSS动画实现滚动播放
weixin_30706691的博客
06-15 1587
通过CSS3动画实现内容在特定区域滚动播放，当鼠标指上去的时候停止滚动 这里是ul列表内容总共十张图片，但是为了播放的连续性，又复制了一份li，这样就不会出现间断 通过animation-play-state:paused实现鼠标指上去停止滚动播放 给ul列表加了display：flex让li横向排列 说明：CSS里设置的100%时候向左移动的1200px是原来的一份ul的宽度，也就是下面...
css动画-滚动出现效果
Joyce的博客
07-31 1163
效果如下：随着画面滚动，元素逐渐显示出现在屏幕中。
滚动驱动动画核心技术解析与实战
滚动驱动动画（Scroll-Driven Animations）是近年来前端开发领域中最具突破性的CSS新特性之一，标志着网页动画从传统的时间轴控制正式迈入空间轴联动的新阶段。这一技术的核心在于将元素的动画执行进度与用户滚动...
基于HTML5与CSS3实现齿轮滚动动画特效
从技术角度看，这种动画并不依赖JavaScript进行复杂的DOM操作，而是充分利用CSS3提供的`transform`（变换）、`animation`（动画）以及`@keyframes`规则来驱动元素运动，从而实现高性能、低负载的流畅动画表现。...
基于滚动触发的CSS关键帧动画库Motus
这种机制实现了真正意义上的“滚动驱动动画”（Scroll-driven Animation），使动画不再是时间轴上的线性播放，而是空间位移的映射结果。 从 API 设计角度来看，Motus 提供了简单直观的接口，极大降低了使用门槛。如...
html中一些简单的css动画 包括滚动进度条 滑动动画
haodanzj的博客
11-20 1189
简单的cssdemo
css实现自动滚动效果
weixin_43410094的博客
06-02 4635
css实现自动无限滚动+悬浮停止滚动效果
用css动画实现无缝滚动效果
qq_40019058的博客
11-15 464
做无缝滚动效果，从来一个superslide搞定一切，但平凡的某一天，UI提出了一个问题：这块一直在抖动啊。我定睛一看：确实是在抖，这……找了其他的插件，效果都不尽如人意。最后，参考蓝湖，用css动画实现。
前端：CSS滚动视图动画实现：屏幕滚动时触发动画
2301_80820432的博客
07-30 1858
但是要注意的是此功能是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 1651
需要自动滚动循环播放的列表，使用纯CSS实现基础循环功能。
css中怎么给div设置一个从上到下的滚动动画
m0_68094390的博客
05-15 5666
在上面的代码中，scroll-div是需要滚动的div，设置了固定的高度和overflow:hidden属性。然后定义了一个名为scroll的动画，使用translateY()函数实现从上到下的滚动效果。首先，给需要滚动的div设置一个固定的高度和overflow属性为hidden，这样可以隐藏超出高度的内容。在@keyframes中，定义从上到下的滚动动画，可以使用translateY()函数来实现垂直方向的移动。可以使用CSS的动画属性来实现从上到下的滚动动画。
【CSS Tricks】鼠标滚轮驱动css动画播放，使用js还是css？
qbbmnnnnnn的博客
10-10 2480
animation-timeline，目前还处于试验阶段。指定用于控制CSS动画进度的时间轴。CSS的创建者曾说过，他最初的设想是CSS作为控制网页行为的主要Web技术。只有当CSS无法完成控制行为时，才使用js脚本作为后备手段。如果在不考虑浏览器支持性的前提下（优先使用chrome最新版本浏览器），项目中有做滚动条绑定动画的需求，我非常建议大家尝试一下，它会给你一种全新的开发体验，在实现相同效果的情况下，页面性能优化最佳。再接再厉~
纯css实现无限循环滚动logo墙
lemon的博客
08-24 1852
文章目录一、需求二、实现1、marquee标签2、css3动画完整示例代码：三、局限性 一、需求 在许多网站的合作伙伴一栏，常常会看到一排排无限地循环滚动的logo墙。 不久前，接到一个类似的需求。需求如下： 1、无限循环滚动； 2、鼠标hover后，暂停滚动，鼠标离开后，继续滚动； 3、支持从左往右和从右往左滚动； 4、滚动速度需要可配置。 简单动画，我们先尝试只使用css实现。 二、实现 1、marquee标签 说到无限循环滚动，很久以前marquee标签可以实现类似的功能，它可以无限循环滚动，并且可
实现CSS3文字逐行向上滚动动画的完整指南
最新发布
weixin_35705784的博客
08-14 1084
CSS3动画的核心是transition和animation属性。transition属性用于简单的动画效果，而animation属性则支持更复杂的动画序列。这些属性能够定义动画的起始状态、结束状态、动画持续时间、时间函数以及其它高级控制选项，如动画延迟和循环次数等。是CSS3animation属性的一个子属性，用于指定关键帧动画的名称。当设置为none时，将不会应用任何关键帧动画。反之，它将引用@keyframes规则中定义的动画序列。.element {
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值