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

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 {height: 250px;overflow: auto;
}
.box {animation: grow both;animation-timeline: view();
}
@keyframes grow {from {transform: scaleX(0);}to {transform: scaleX(1);}
}

scroll-animation1.gif

如何使用新语法呢? 你会发现 from 其实对应的就是 entry 0% 的位置, to 对应的是 exit 100% 的位置, 于是

@keyframes grow {entry 0% {transform: scaleX(0);}exit 100% {transform: scaleX(1);}
}

📖 <timeline-range-name> 后面的百分比不能省略.

scroll-animation2.gif

另一种 animation-range 的实现

有了新的语法, 我们大胆尝试通过 @keyframes 修改关键帧, 来达到修改 animation-range 的想法. 比如我希望实现 animation-range: entry

.box {animation: grow both;animation-timeline: view();
}
@keyframes grow {entry 0% {transform: scaleX(0);}entry 100% {transform: scaleX(1);}
}

scroll-animation3.gif

因为 animation-range 是一个简写属性, 包括 animation-range-startanimation-range-end, 所以我们也可以在 @keyframes 中指定两组不同的关键帧, 分别对应 animation-range-startanimation-range-end.

@keyframes grow {entry 0% {transform: scaleX(0);}entry 100% {transform: scaleX(1);}exit 0% {transform: scaleX(1);}exit 100% {transform: scaleX(2);}
}

请大家注意动图右下角的代码

scroll-animation4.gif

谢谢你看到这里😊

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

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

相关文章

[RISC-V]verilog

小明教IC-1天学会verilog(7)_哔哩哔哩_bilibili task不可综合&#xff0c;function可以综合

4+非肿瘤纯生信。氧化应激+WGCNA+药物预测筛序关键基因

今天给同学们分享一篇非肿瘤氧化应激WGCNA的生信文章“Identification of oxidative stress-related biomarkers associated with the development of acute-on-chronic liver failure using bioinformatics”&#xff0c;这篇文章于2023年10月10日发表在Scientific Reports期刊…

数据库数据恢复—Oracle数据库报错ORA-01110错误的数据恢复案例

Oracle数据库故障&#xff1a; 北京某公司一台运行oracle数据库的服务器&#xff0c;机房意外断电导致该服务器重启&#xff0c;重启后发现oracle数据库报错。该Oracle数据库没有备份。 Oracle数据库数据恢复过程&#xff1a; 1、北亚企安数据恢复工程师检查该oracle数据库的数…

input改造文件上传,el-table的改造,点击上传,拖拽上传,多选上传

第一个input标签效果 第二个input标签的效果 el-table的改造效果 <template><div class"outerBox"><div class"analyze" v-if"status"><div class"unFile"><div class"mainBox"><img clas…

黔院长 | 黄帝内经:人有四经十二从!

"人有四经十二从"这句话出自《黄帝内经素问》&#xff0c;“四经”指的是与四时相应的正常脉象&#xff0c;也是指四个主要经络&#xff1a;太阳经、少阳经、太阴经和少阴经。在中医理论当中这些经络被认为是人体气血运行的通道。 而“十二从”则表示人体的十二个经脉…

计算机毕设 基于CNN实现谣言检测 - python 深度学习 机器学习

文章目录 1 前言1.1 背景 2 数据集3 实现过程4 CNN网络实现5 模型训练部分6 模型评估7 预测结果8 最后 1 前言 Hi&#xff0c;大家好&#xff0c;这里是丹成学长&#xff0c;今天向大家介绍 一个深度学习项目 基于CNN实现谣言检测 1.1 背景 社交媒体的发展在加速信息传播的…

ChatGLM3 本地部署的解决方案

大家好,我是herosunly。985院校硕士毕业,现担任算法研究员一职,热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名,CCF比赛第二名,科大讯飞比赛第三名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的见解。曾经辅导过若干个非计算机专业的学生进入到算法…

Java 将list集合的字符串格式转为Map

Java 将list集合的字符串格式转为Map List<Object> list new ArrayList<>(); Map<String,String> map1 new HashMap<>(); map1.put("fileName","测试1"); map1.put("level","1"); list.add(map1);Map<S…

[Java]前中后序遍历二叉树/递归与非递归

一、递归方法 首先&#xff0c;树形结构都是由递归方式定义的。那么递归是怎么用的&#xff1f; 1、终止条件&#xff1b;2、调用自身 分析 1、什么时候停止&#xff1f; 当结点值为空的时候&#xff0c;返回null&#xff1b; 2、如何调用自身&#xff1f; 以前序遍历为例&…

php之 角色的权限管理(RBAC)详解

RBAC&#xff08;Role-based access control&#xff09;是一种常见的权限管理模型&#xff0c;通过将用户分配至特定的角色&#xff0c;以及为角色分配访问权限&#xff0c;实现了权限管理的目的。以下是关于RBAC的详细解释&#xff1a; 角色&#xff1a;RBAC模型的核心是角色…

Ubuntu编译 PCL 1.13.1 详细流程

Ubuntu编译 PCL 1.13. 详细流程 一、编译环境二、虚拟机准备1. 虚拟机扩容2. 配置交换分区 三、Cmake - gui 生成 MakeFile1. 解决 flann 依赖问题2. 配置 Cmake 四、编译安装1.编译&#xff1a;2. 安装 一、编译环境 Ubuntu&#xff1a;Ubuntu 20.04 VMware&#xff1a;VMwar…

如何学好C++?学习C和C++的技巧是什么?

如何学好C?学习C和C的技巧是什么&#xff1f; 你这三个问题&#xff0c;前两个都是意思是差不多的&#xff0c;那么怎么怎么学习C/C我来问答一下&#xff1a;最近很多小伙伴找我&#xff0c;说想要一些C资料&#xff0c;然后我根据自己从业十年经验&#xff0c;熬夜搞了几个通…

【嵌入式开源库】timeslice的使用,完全解耦的时间片轮询框架构

完全解耦的时间片轮询框架构 简介项目代码timeslice.htimeslice.clist.hlist.c 创建工程移植代码实验函数说明timeslice_task_inittimeslice_task_addtimeslice_tak_deltimeslice_get_task_num 结尾 简介 timeslice是一个时间片轮询框架&#xff0c;他是一个完全解耦的时间片轮…

三十七、【进阶】验证索引的效率

1、准备工作&#xff1a; 创建一张表&#xff0c;该表中有一千万条数据&#xff0c;名为tb_sku&#xff1b; 2、使用主键查询&#xff1a; select * from tb_stu where id1\G; 3、使用非索引查询&#xff1a; 4、给sn字段创建索引&#xff1a; 在创建过程中&#xff0c;发现…

如何使用 nvm-windows 这个工具来管理你电脑上的Node.js版本

nvm-windows 是一个用于管理在 Windows 上安装的多个 Node.js 版本的工具。以下是安装和使用 nvm-windows 的步骤&#xff1a; 第1步&#xff1a;下载 nvm-windows 访问 nvm-windows 的 GitHub发布页面.下载最新版本的 nvm-setup.zip 文件。 第2步&#xff1a;安装 nvm-wind…

conda虚拟环境笔记收录

1、安装conda 增加执行权限&#xff1a; chmod x Anaconda3-2023.03-1-Linux-x86_64.sh 开始执行&#xff1a;./Anaconda3-2023.03-1-Linux-x86_64.sh2、查看版本 conda --version3、查看当前虚拟环境 虚拟环境和全局环境有前缀可见 如果不进行设置&#xff0c;重新启动就变成…

MySQL的基础(一)

MySQL的基础&#xff08;一&#xff09; SQLSQL的语法特点主要包括以下几点&#xff1a;一、 SQL - DDL -- 数据定义语言1.1 数据库操作1.1 显示现有的数据库1.2 创建数据库1.3 删除数据库1.4 使用 1.2 数据表操作1.2.1 表查询1.2.2 表创建1.2.3 修改表 1.2.4 小结 二、SQL - D…

calcite 校验层总结

1、校验的作用 1&#xff09;完善语义信息 例如在SQL语句中&#xff0c;如果碰到select * 这样的指令&#xff0c;在SQL的语义当中&#xff0c;“*” 指的是取出对应数据源中所有字段的信息&#xff0c;因此就需要根据元数据信息来展开。 2&#xff09;结合元数据信息来纠偏…

特殊类设计[下] --- 单例模式

文章目录 5.只能创建一个对象的类5.1设计模式[2.5 万字详解&#xff1a;23 种设计模式](https://zhuanlan.zhihu.com/p/433152245)5.2单例模式1.饿汉模式1.懒汉模式 6.饿汉模式7.懒汉模式7.1饿汉模式优缺点:7.2懒汉模式1.线程安全问题2.单例对象的析构问题 8.整体代码9.C11后可…

UVa129 Krypton Factor(困难的串)

1、题目 2、题意 如果一个字符串包含两个相邻的重复子串&#xff0c;则称它是“容易的串”&#xff0c;其他串称为“困难的串”。例如&#xff0c;BB、ABCDACABCAB、ABCDABCD都是容易的的串&#xff0c;而D、DC、ABDAB、CBABCBA 都是困难的串。 输入正整数 k k k 和 L L L&a…