CSS 滚动驱动动画 animation-range

  • animation-range
    • 语法
      • normal
      • length-percentage
      • timeline-range-name
        • 具名时间线范围 named timeline range
        • cover
        • contain
        • entry 和 entry-crossing
        • exit 和 exit-crossing
    • 兼容性

animation-range

这个属性可同时对 scroll progress timelineview progress timeline 这两种不同时间线驱动的动画起效果!

还记得之前在 view() 中看到的例子吗, view progressive timeline 是以元素开始出现为 0%, 完全离开滚动容器后为 100%. 实际上我们可能需要更多类型的进度, 比如开始出现(0%)和完全出现(100%), 或准备离开(0%)和完全离开(100%). 如下

在这里插入图片描述

在这里插入图片描述

这个时候就需要 animation-range 大放异彩了, 因为它改变的就是动画范围.

语法

animation-range = [ <'animation-delay-start'> <'animation-delay-end'>? | <timeline-range-name> ]#  

animation-range 是一个简写属性, 是 animation-range-startanimation-range-end 的简写. 如果同时指定两个值, 那么第一个值会作为 animation-range-start 第二个值会作为 animation-range-end.

不论是 animation-range-start 还是 animation-range-end, 他们的取值都是一样的

  • normal:
  • <length-percentage>
  • <timeline-range-name>
  • <timeline-range-name> 加上 <timeline-range-name>

有了上面的取值, 对于简写属性 animation-range 来说

  • 如果只是 normal 或者 <length-percentage>, 那么这个值就属于 animation-range-start, 而 animation-range-end 默认为 normal
  • 如果仅仅是一个 <timeline-range-name>, 那么动画范围就是这个具名时间线范围从 0%100%
    • 📖 也就是, 如果 <timeline-range-name> 属于 animation-range-start, 那么百分比默认为 0%; 如果属于 animation-range-end 那么百分比默认为 100%.
  • 如果是 <timeline-range-name> 加上 <length-percentage>, 那么动画范围就是这个具名时间线从 <length-percentage> 到结束.

因此下面的语法都是 OK 的.

  • animation-range: normal;
  • animation-range: 50%;
  • animation-range: contain;
  • animation-range: normal 50%;
  • animation-range: 50% normal;
  • animation-range: 50% 75%;
  • animation-range: entry exit;
  • animation-range: cover cover 100px;
  • animation-range: entry 100px exit;

下面就具体看看不同取值代表的含义

normal

默认值

先看 view progress timeline, 先给出代码, 并且后面的示例都将在此基础上修改

<div class="relative"><div class="container">Lorem...<div class="box positive-inset-length"></div></div>
</div>
.container {height: 200px;overflow: auto;
}
.box {animation: appear1 linear both;animation-timeline: --why-is-this;view-timeline: --why-is-this;animation-range: normal;
}

这就是默认的表现, 在 .box 元素将要出现时, 动画进度为 0%; 在元素完全离开滚动容器时, 动画进度为 100%.

在这里插入图片描述

再看 scroll progress timeline.

<div class="relative"><div class="container container1"><div class="top"></div>Lorem ...</div>
</div>
.container1 {scroll-timeline: --youHaveToBeThis;
}
.container1 .top {position: absolute;animation: appear1 linear both;animation-timeline: --youHaveToBeThis;
}

这也是默认的表现, 容器开始滚动时, 动画进度为 0%; 滚动容器滚动到最大位置时, 动画进度为 100%.

在这里插入图片描述

length-percentage

同样先看 view progress timeline

.box {animation-range: 20%;
}

记得之前说过什么吗? 如果只有一个 <length-percentage> 值, 那么这个值被分配给 animation-range-startanimation-range-end 保持默认值 normal 不变. 下图表现得符合预期, 动画在 20% 的位置开始, 在元素完全离开滚动容器时结束.

在这里插入图片描述

然后是 scroll progress timeline

.container1 .top {animation-range: 50%;
}

动画效果符合预期, 顶部水平条在滚动 50% 的位置开始出现, 在滚动到结束时完全展开.

在这里插入图片描述

timeline-range-name

再继续往下之前, 我必须说的是 MDN 关于这几个关键字的解释和含义不如 CSS 规范 解释得清楚明白. 因此, 下面的关键字我都会采用规范中的定义, 以便更清楚地说明他们之间的不同之处.

💡 还有一点, 下面的属性和 scroll progress timeline 无缘了

📮 本节所有的例子演示都来自 这个网站. 强烈推荐, 因为演示效果非常清晰易懂

具名时间线范围 named timeline range

📖 百分比的是根据具名时间线范围, named timeline range计算的, 如果没有具名时间线范围则根据整个时间线计算.

cover

cover: 表示 view progress timeline 的全部范围

  • 0% 表示元素的 principle box 的 start border edge 开始边框边界 和时间线的 view progress visibility range 的 end edge 结束边界的相交位置.
  • 我知道大家看到这么多名词又看到哐哐哐好多链接🔗有一点害怕, 不过不要紧, 我慢慢简化到大家最熟悉的情景
  • principle box: 就理解为 border box 就行, 为什么会多一个新的名字呢, 因为像 li 这样的元素, 它不光光有自己的盒子, 还会有前面的 marker box. 但这里我们不考虑这种情况就简化为 border box
  • start border edge: 这个更容易解释, 因为这里用 start 表示的逻辑方向. 如果是从下到上滚动, 表示上边框; 如果是从左到右滚动, 表示右边框
  • view progress visibility range: 这个就是纯纯新概念, 还记得我们之前写过 view-timeline-inset 吗? 这个范围表示的就是滚动区域减去 view-timeline-inset 后剩下的区域
  • 所以, 解释了这么多, 0% 表示元素的上边框和滚动区域下边界相交的位置. 这样说起来, 是不是容易多了呢? 😊
  • 100% 表示元素的 principle box 的 end border edge 结束边框边界 和时间线的 view progress visibility range 的 start edge 开始边界的相交位置.

来看例子,

animation-range7.gif

接下来, 我们要叠 buff 了, 也就是增加百分比和 view-timeline-inset

#subject {animation-timeline: view(block);animation-range: cover 50% cover 100%;view-timeline-inset: 10%;
}

animation-range8.gif

所以, 再次印证了 animation-range 的百分比是根据谁的百分比, 根据的应该是 timeline-range-name 指定的范围, 也就是 cover 的范围百分比, 也就是整个滚动窗口去掉 view-timeline-inset 后的范围百分比.

不好意思, 因为 CSDN 限制文件上传 5MB, 所以我录的 GIF 都看不了了, 请大家移步 掘金

contain

contain: contain 的情况稍微复杂, 为啥嘞, 因为存在着元素和滚动窗口谁大谁小的问题

  • 熟悉 CSS 的朋友都知道, covercontain 这两个关键字出现在很多 CSS 属性中, 比如 object-fitbackground-size. 以 background-size 为例
    • cover 表示占满背景不留下一点空白(也就是放大图片和背景宽高中较大值相同);
    • contain 表示把图片完全显示出来, 有可能留下空白.
  • 我们先说元素高度小于滚动窗口的情况
    • 0% 表示元素的 principle box 的 end border edge 结束边框边界 和时间线的 view progress visibility range 的 end edge 结束边界的相交位置.
    • 100% 表示元素的 principle box 的 start border edge 开始边框边界 和时间线的 view progress visibility range 的 start edge 开始边界的相交位置.
    • 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
  • 如果是元素高度大于滚动窗口的情况
    • 0% 表示元素的 principle box 的 start border edge 开始边框边界 和时间线的 view progress visibility range 的 start edge 开始边界的相交位置.
    • 100% 表示元素的 principle box 的 end border edge 结束边框边界 和时间线的 view progress visibility range 的 end edge 结束边界的相交位置.
    • 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

同样下面要叠 buff 了, 也就是增加百分比和 view-timeline-inset

#subject {animation-timeline: view(block);animation-range: contain 20% contain 100%;view-timeline-inset: 10%;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

entry 和 entry-crossing
  • entry
    • 0%cover0% 相同.
    • 100%contain0% 相同.
  • entry-crossing
    • 0%cover0% 相同. (这一点规范没有明确说相同, 但是看定义他们确实是相同的)
    • 100% 表示元素的 principle box 的 end border edge 结束边框边界 和时间线的 view progress visibility range 的 end edge 结束边界的相交位置.
    • 有意思的事情来了, 首先 entryentry-crossing 看起来就很像, 而且他们 0% 的位置一模一样, 不一样的地方就是 100%. 因为 contain0% 包含了两种情况.

对于元素高度小于窗口高度的情况, 这两个属性的标签完全相同. 先看 entry

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

再看 entry-crossing, 和 entry 一模一样

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

但是当元素高度超过滚动容器时, 就不一样了, 还是先看 entry, 0% 的时候没啥好说的, 100% 的位置是元素开始离开滚动容器(上 border 要离开)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

entry-crossing 呢, 0% 的时候和 entry 一样, 而 100% 的位置是元素下边界进入滚动容器

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

exit 和 exit-crossing
  • exit: 从这个关键字的意思来看, 就表示离开.
    • 0%contain100% 相同.
    • 100%cover100% 相同.
  • exit-crossing
    • 0%contain100% 相同.
    • 100% 表示元素的 principle box 的 end border edge 结束边框边界 和时间线的 view progress visibility range 的 start edge 开始边界的相交位置.
    • 和前面一组选手一样, 这两个元素的区别同样在元素高度大于滚动容器时才能看得出来.

当元素高度小于滚动窗口时, 先看 exit

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

再看 exit-crossing

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

当元素高度大于滚动窗口时, exit 表现如下. 0% 表示当元素的下边界进入滚动容器, 而 100% 表示元素完全离开滚动容器, 即元素的下边界离开滚动容器的上边界.

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

来看 exit-crossing, 与 exit 不同的是 0% 的部分, exit-crossing0% 是元素的上边界开始离开滚动容器.

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

兼容性

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

我必须说, 我第一次刚看也不是很明白每个的意思并且搞不清 entryentry-crossing 的区别, 关键这几个新的 CSS 属性又是新出的, 网上可参考的资料寥寥无几, 就只能去看 CSS 规范的文档. 如果你不是瞬间滑倒最后而是认真看懂每个关键词的意思以及对应的动图演示, 特别是插入了 view-timeline-inset 的值, 相信你一定会有收获

谢谢你看到这里😊

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/104489.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

了解华为交换机路由器的基本命令

什么是CLI&#xff1a;使用户与设备交互的界面&#xff0c;用户输入对应的命令&#xff0c;设备会回复我们输入的内容&#xff0c;回车车后设备会执行对应命令&#xff0c;达到管理、配置、查看的目的。 CLI界面分为三种操作视图&#xff1a; 用户试图&#xff1a;设备登陆后…

【java|golang】多字段排序以及排序规则

奖励最顶尖的 K 名学生 给你两个字符串数组 positive_feedback 和 negative_feedback &#xff0c;分别包含表示正面的和负面的词汇。不会 有单词同时是正面的和负面的。 一开始&#xff0c;每位学生分数为 0 。每个正面的单词会给学生的分数 加 3 分&#xff0c;每个负面的词…

selenium打开火狐浏览器

项目上需求为&#xff1a;甲方OA 系统是IE系统&#xff0c;需要从IE系统点个按钮打开火狐浏览器单点登录跳转到我们的系统 前期解决方案为&#xff1a;打开浏览器就行了&#xff0c;然后就用的是打开本地浏览器&#xff0c;但是由于B/S架构&#xff0c;有别人远程访问我的ip来…

如何使用ChatPPT生成PPT文档

简介 ChatPPT是一个基于人工智能的PPT生成工具&#xff0c;可以帮助用户快速生成高质量的PPT文档。ChatPPT使用自然语言处理技术&#xff0c;可以根据用户的指令生成PPT内容、设计和排版。 使用方法 ChatPPT提供了两种使用方式&#xff1a;在线体验版和Office插件版。 在线…

【博客搭建】1、拾壹博客本地启动遇到的问题和需要注意的坑

一、后端&#xff08;blog&#xff09;启动 1、修改application.yml中的数据库链接与密码&#xff0c;Redis账号密码&#xff0c;即可启动成功&#xff1b; 2、运行之前先导入sql&#xff1b; 3、 如需上传文件保存至本地&#xff08;例如相册的照片&#xff09;&#xff0c;需…

【竞赛题目】木块(C语言详解)

" 木块 " 是【第二届全国高校计算机技能竞赛】里的一道竞赛题目&#xff0c;博主觉得很新颖想推荐给大家&#xff1b; 题目描述 为了提高词汇量&#xff0c;小理得到了一套四块木块&#xff0c;其中每块都是一个立方体&#xff0c;六面各写着一个字母。他正在通过将…

神经网络中卷积和池化的区别

1、什么叫卷积&#xff1f; 卷积层是用一个固定大小的矩形区去席卷原始数据&#xff0c;将原始数据分成一个个和卷积核大小相同的小块&#xff0c;然后将这些小块和卷积核相乘输出一个卷积值&#xff08;注意这里是一个单独的值&#xff0c;不再是矩阵了&#xff09;。 卷积的…

YOLOv5算法改进(11)— 主干网络介绍(MobileNetV3、ShuffleNetV2和GhostNet)

前言:Hello大家好,我是小哥谈。主干网络通常指的是深度学习中的主干模型,通常由多个卷积层和池化层组成,用于提取输入数据的特征。在训练过程中,主干网络的参数会被不断优化以提高模型的准确性。YOLOv5算法中的主干网络可以有多种替换方案,为了后面讲解的方便,本篇文章就…

CVE-2017-12615 Tomcat远程命令执行漏洞

漏洞简介 2017年9月19日&#xff0c;Apache Tomcat官方确认并修复了两个高危漏洞&#xff0c;漏洞CVE编号&#xff1a;CVE-2017-12615和CVE-2017-12616&#xff0c;其中 远程代码执行漏洞&#xff08;CVE-2017-12615&#xff09; 当 Tomcat 运行在 Windows 主机上&#xff0c;…

加持智慧医疗,美格智能5G数传+智能模组让就医触手可及

智慧医疗将云计算、物联网、大数据、AI等新兴技术融合赋能医疗健康领域&#xff0c;是提高医疗健康服务的资源利用效率&#xff0c;创造高质量健康医疗的新途径。《健康中国2030规划纲要》把医疗健康提升到了国家战略层面&#xff0c;之后《“十四五”全面医疗保障规划》等一系…

时间复杂度O(40n*n)的C++算法:修改图中的边权

本篇源码下载 点击下载 1.12.1. 题目 给你一个 n 个节点的 无向带权连通 图&#xff0c;节点编号为 0 到 n - 1 &#xff0c;再给你一个整数数组 edges &#xff0c;其中 edges[i] [ai, bi, wi] 表示节点 ai 和 bi 之间有一条边权为 wi 的边。 部分边的边权为 -1&#xff08…

CANdb++数据库操作

CANdb数据库操作 创建工程结构文件夹新建数据库&总线描述节点设置节点创建配置Message属性信号设置节点收发信号 环境变量配置一致性检验数据库工程XVehicle.dbc导入工程文件总结 创建工程结构文件夹 在文件夹X-Vehicle-1下&#xff0c;建立工程目录文件夹CANdb&#xff0…

CustomNavBar 自定义导航栏视图

1. 创建偏好设置键 CustomNavBarTitlePreferenceKey.swift import Foundation import SwiftUI//State private var showBackButton: Bool true //State private var title: String "Title" //"" //State private var subtitle: String? "SubTitl…

相似性搜索:第 1 部分- kNN 和倒置文件索引

图片来源&#xff1a;维亚切斯拉夫叶菲莫夫 一、说明 SImilarity 搜索是一个问题&#xff0c;给定一个查询的目标是在所有数据库文档中找到与其最相似的文档。 在数据科学中&#xff0c;相似性搜索经常出现在NLP领域&#xff0c;搜索引擎或推荐系统中&#xff0c;其中需要检索最…

C# OpenVINO Cls 图像分类

效果 耗时 class idbrown_bear, score0.86 preprocess time: 0.00ms infer time: 2.72ms postprocess time: 0.02ms Total time: 2.74ms项目 代码 using OpenCvSharp; using Sdcb.OpenVINO; using Sdcb.OpenVINO.Natives; using System; using System.Diagnostics; using Sys…

地产三维实景vr展示的功能及特点

随着科技的不断发展&#xff0c;VR(虚拟现实)技术也越来越成熟。VR技术的广泛应用&#xff0c;已经逐渐渗透到各个领域&#xff0c;其中引人注目的就是虚拟展馆。虚拟展馆是一种利用VR技术构建的线上展示空间&#xff0c;让观众可以在家中就能参观展览&#xff0c;带来了极大地…

模板进阶和反向迭代器

文章目录 模板非类型模板参数模板特化函数模板特化类模板特化 模板分离编译 反向迭代器 模板 非类型模板参数 模板参数分类类型形参与非类型形参。 类型形参即&#xff1a;出现在模板参数列表中&#xff0c;跟在class或者typename之类的参数类型名称。 非类型形参&#xff0c…

基于CodeFormer实现图片模糊变清晰,去除马赛克等效果

前言 CodeFormer是一种基于AI技术深度学习的人脸复原模型&#xff0c;由南洋理工大学和商汤科技联合研究中心联合开发。该模型通过结合了VQGAN和Transformer等技术&#xff0c;可以通过提供模糊或马赛克图像来生成清晰的原始图像。可以实现老照片修复、照片马赛克修复、黑白照…

【ARM Coresight 系列文章 9.1 -- ITM 仪器化跟踪宏单元详细介绍】

文章目录 1.1 ITM 介绍1.1.1 ITM 功能介绍1.1.2 Cortex-M ITM 的地址范围1.2 ITM 使用1.2.1 ITM 寄存器介绍1.2.2 Cortex-M7 ITM 代码示例1.2.3 Cortex-M33 ITM 代码示例1.1 ITM 介绍 在debug 调试阶段通常都是使用 printf(printk) 来进行进行 log 输出,然后定位问题。那么如…

排序算法-希尔排序法(ShellSort)

排序算法-希尔排序法&#xff08;ShellSort&#xff09; 1、说明 我们知道当原始记录的键值大部分已排好序的情况下插入排序法非常有效&#xff0c;因为它不需要执行太多的数据搬移操作。希尔排序法是D.L.Shell在1959年7月发明的一种排序法&#xff0c;可以减少插入排序法中数…