当前位置: 首页 > news >正文

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.lryc.cn/news/210646.html

相关文章:

  • 二十三种设计模式全面解析-原型模式进阶之原型管理器:集中管理对象原型的设计模式之道
  • 【微信小程序开发】学习小程序的网络请求和数据处理
  • 微信小程序 slot 不显示
  • Spring Boot 优雅配置yml配置文件定义集合、数组和Map
  • java+springboot+vue开发的大学生健康检测小程序
  • 从零开始的LINUX(四)
  • 组播应用层收不到问题-接收网卡绑定
  • 回流重绘零负担,网页加载快如闪电
  • QT5.15在Ubuntu22.04上编译流程
  • 【电路笔记】-交流波形和交流电路理论
  • vue2 系列:自定义 v-model
  • 广东木模板批发,建筑桥梁工程专用组合木模板
  • 工业相机常见的工作模式、触发方式
  • 【C语言】指针那些事(上)
  • liunx Centos-7.5上 rabbitmq安装
  • 蓝桥杯学长经验笔记
  • 开发库介绍
  • 基于单片机的智能清洁小车设计—控制系统设计
  • 玩转视图变量,轻松实现动态可视化数据分析
  • 【51单片机】:智能施工电梯系统
  • 前端线上部署,如何通知用户有新版本
  • Debezium日常分享系列之:Debezium2.4版本之用于 MongoDB的Debezium 连接器
  • 编程应用场景:便利店商超进销存管理系统软件,试用版可以免费试用下载
  • 【LInux】进程概念II -- 描述进程
  • 紫光集团、展讯通信、锐迪科(RDA)、紫光展锐以及翱捷科技(ASR)关系梳理
  • 7.多线程之单例模式
  • docker 常用指令
  • Numpy、Pandas、Matplotlib学习(更新ing...)
  • Linux-sdio接口
  • 【MATLAB源码-第62期】基于蜣螂优化算法(DBO)的无人机三维地图路径规划,输出最短路径和适应度曲线。