#优质博文 #CSS #前端 #动画 #courseA First Look at Scroll-Triggered Animations：Chrome 146 率先支持了纯 CSS 的滚动触发动画，让开发者不用 JS 也能实现类似 Intersection Observer 的元素入场动画

1. 3小时前

   Forwarded from cosine - 前端人の日常频道

   #优质博文 #CSS #前端 #动画 #course
   A First Look at Scroll-Triggered Animations：Chrome 146 率先支持了纯 CSS 的滚动触发动画，让开发者不用 JS 也能实现类似 Intersection Observer 的元素入场动画。
   
   

   AI 摘要：文章介绍了 Chrome 146 引入的新特性：滚动触发动画（Scroll-Triggered Animations）。不同于与滚动进度完全绑定的 Scroll-Driven 动画，Scroll-Triggered 允许在元素滚动到设定的视口阈值（如完全进入视口）时，直接触发并播放一段常规的、有固定时长的 CSS 动画。通过新属性 timeline-trigger 和 animation-trigger，开发者可以轻松控制动画的触发时机和播放行为（如仅播放一次或随着滚动进出反复触发），进一步减少了对 JavaScript 监听的依赖。

   Toggle hidden content

   CSS-Tricks

   

   A First Look at Scroll-Triggered Animations | CSS-Tricks

   Let's poke at the differences between scroll-driven and scroll-triggered animations.