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.rhkb.cn/news/159301.html

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

相关文章

数据结构与算法-(8)---队列(Queue)

&#x1f308;write in front&#x1f308; &#x1f9f8;大家好&#xff0c;我是Aileen&#x1f9f8;.希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流. &#x1f194;本文由Aileen_0v0&#x1f9f8; 原创 CSDN首发&#x1f412; 如…

Python算法练习 10.15

leetcode 2130 链表的最大孪生和 在一个大小为 n 且 n 为 偶数 的链表中&#xff0c;对于 0 < i < (n / 2) - 1 的 i &#xff0c;第 i 个节点&#xff08;下标从 0 开始&#xff09;的孪生节点为第 (n-1-i) 个节点 。 比方说&#xff0c;n 4 那么节点 0 是节点 3 的孪…

LaunchView/启动页 的实现

1. 创建启动画板&#xff0c;LaunchScreen.storyboard 添加组件如图: 2. 项目中设置只支持竖屏&#xff0c;添加启动画板&#xff0c;如图: 3. 创建启动画面动画视图&#xff0c;LaunchView.swift import SwiftUI/// 启动视图 struct LaunchView: View {/// 字符串转换为字符串…

ES知识点全面整理

● 我们从很多年前就知道 ES6, 也就是官方发布的 ES2015 ● 从 2015 年开始, 官方觉得大家命名太乱了, 所以决定以年份命名 ● 但是大家还是习惯了叫做 ES6, 不过这不重要 ● 重要的是, ES6 关注的人非常多, 大家也会主动去关注 ● 但是从 2016 年以后, 每年官方都会出现新…

【TensorFlow2 之013】TensorFlow-Lite

一、说明 在这篇文章中&#xff0c;我们将展示如何构建计算机视觉模型并准备将其部署在移动和嵌入式设备上。有了这些知识&#xff0c;您就可以真正将脚本部署到日常使用或移动应用程序中。 教程概述&#xff1a; 介绍在 TensorFlow 中构建模型将模型转换为 TensorFlow Lite训练…

Mac 远程 Ubuntu

1. Iterm2 添加ssh 参考&#xff1a;https://www.javatang.com/archives/2021/11/29/13063392.html 2. Finder 添加远程文件管理 2.1 ubuntu 配置 安装samba sudo apt-get install samba配置 [share]path /home/USER_NAME/shared_directoryavailable yesbrowseable ye…

NewStarCTF2023week2-ez_sql

闭合之后尝试判断字段数&#xff0c;存在WAF&#xff0c;使用大小写绕过&#xff08;后面的sql语句也需要进行大小写绕过&#xff09; ?id1 Order by 5-- 测出有5列 ?id1 Order by 6-- 查一下数据库名、版本、用户等信息 ?id1Union Select database(),version(),user(),4,…

elementUI el-table+树形结构子节点选中后没有打勾?(element版本问题 已解决)

问题 1.不勾选父级CB111&#xff0c;直接去勾选子级&#xff08;ST2001…&#xff09;&#xff0c;子级选中后没有打勾显示 排查 一直以为是这个树形结构和表格不兼容产生的问题&#xff0c;到后来看官方demo都是可以勾选的&#xff0c;最后排查到了版本问题&#xff0c; 项…

数学建模——人工神经网络模型

一、人工神经网络简介 1、神经网络起源与应用 1943年心理学家McCulloch和数学家Pitts提出神经元生物数学模型&#xff08;M-P模型&#xff09;&#xff0c;后来人工神经网络(Artifical Neural Network,ANN)是在生物神经网络(Biological Neural Network,BNN)基础上发展起来的&a…

SystemC入门学习-第8章 测试平台的编写

之前的章节&#xff0c;一直把重点放在用SystemC来描述硬件电路上&#xff0c;即如何编写SystemC 的RTL。本章的注意力集中在验证和编写测试平台上。 重点包括&#xff1a; 如何生成时钟信号和激励波形如何编写有响应能力的测试平台如何记录仿真结果 8.1 编写测试平台 测试平…

IO流:java中解码和编码出现乱码说明及代码实现

IO流&#xff1a;java中解码和编码的代码实现 一、UTF-8和GBK编码方式二、idea和eclipse的默认编码方式三、解码和编码方法四、代码实现编码解码 五、额外知识扩展 一、UTF-8和GBK编码方式 如果采用的是UTF-8的编码方式&#xff0c;那么1个英文字母 占 1个字节&#xff0c;1个…

使用Swift开发Framework遇到的问题及解决方法

文章目录 一、Swift 旧版本Xcode 打出来的framework 新版本不兼容问题 一、Swift 旧版本Xcode 打出来的framework 新版本不兼容问题 Cannot load module xxx built with SDK ihphoneos16.4 when using SDK iphoneos17.0:XXX/xxx.framework/Modules/xxx.swiftmodule/arm64-appl…

java swing实现点击按钮切换图片(简单实现)

本文教程&#xff0c;主要提供一个简单的例子&#xff0c;使用java swing完成点击按钮能够切换图片。 目录 一、程序预览 二、程序代码 一、程序预览 二、程序代码 package learnProject.csdn;import java.awt.BorderLayout; import java.awt.FlowLayout; import java.awt.ev…

webpack 解决:Cannot use import statement outside a module 的问题

1、问题描述&#xff1a; 其一、报错为&#xff1a; Uncaught SyntaxError: Cannot use import statement outside a module; 中文为&#xff1a; 未捕获的语法错误&#xff1a;无法在模块外部使用 import 语句; 其二、问题描述为&#xff1a; 在项目打包的时候 npm run …

【Vue面试题二十一】、Vue中的过滤器了解吗?过滤器的应用场景有哪些?

文章底部有个人公众号&#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享&#xff1f; 踩过的坑没必要让别人在再踩&#xff0c;自己复盘也能加深记忆。利己利人、所谓双赢。 面试官&#xff1a;Vue中的过滤器了解吗&am…

Android组件通信——PendingIntent(二十八)

1. PendingIntent 1.1 知识点 &#xff08;1&#xff09;了解PendingIntent与Intent的区别&#xff1b; &#xff08;2&#xff09;可以完成Notification功能的开发&#xff1b; &#xff08;3&#xff09;可以使用PendingIntent进行短信的发送&#xff1b; 1.2 具体内容 …

asp.net老年大学信息VS开发sqlserver数据库web结构c#编程Microsoft Visual Studio计算机毕业设计

一、源码特点 asp.net老年大学信息管理系统是一套完善的web设计管理系统&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为vs2010&#xff0c;数据库为sqlserver2008&#xff0c;使用c# 语言开发 asp.net老年大学信息管理系统…

[论文笔记]SimCSE

引言 今天带来一篇当时引起轰动的论文SimCSE笔记,论文题目是 语句嵌入的简单对比学习。 SimCSE是一个简单的对比学习框架,它可以通过无监督和有监督的方式来训练。 对于无监督方式,输入一个句子然后在一个对比目标中预测它自己,仅需要标准的Dropout作为噪声。这种简单的…

“Python+”集成技术高光谱遥感数据处理与机器学习深度应用

涵盖高光谱遥感数据处理的基础、python开发基础、机器学习和应用实践。重点解释高光谱数据处理所涉及的基本概念和理论&#xff0c;旨在帮助学员深入理解科学原理。结合Python编程工具&#xff0c;专注于解决高光谱数据读取、数据预处理、高光谱数据机器学习等技术难题&#xf…

springboot中如何在测试环境下进行web环境模拟测试

web环境模拟测试 模拟端口 SpringBootTest(webEnvironment SpringBootTest.WebEnvironment.RANDOM_PORT) public class WebTest {Testvoid testRandomPort () {} }