互联网搬💩集散地BGP 分频: @bakanetwork内频：https://t.me/+KeNZttiOmFtlZjE1「愿你在未来与我的既往重逢」https://timeline.byteloid.onehttps://timeline.byteloid.one/posts/2868https://timeline.byteloid.one/posts/2868Sun, 21 Jun 2026 07:41:59 GMT<a href="/search/%23%E4%BC%98%E8%B4%A8%E5%8D%9A%E6%96%87">#优质博文</a> <a href="/search/%23CSS">#CSS</a> <a href="/search/%23%E5%89%8D%E7%AB%AF">#前端</a> <a href="/search/%23%E5%8A%A8%E7%94%BB">#动画</a> <a href="/search/%23course">#course</a><br /><a href="https://css-tricks.com/css-scroll-triggered-animations-first-look/" target="_blank">A First Look at Scroll-Triggered Animations</a>：Chrome 146 率先支持了纯 CSS 的滚动触发动画，让开发者不用 JS 也能实现类似 Intersection Observer 的元素入场动画。<br /><br /><blockquote>AI 摘要：文章介绍了 Chrome 146 引入的新特性：滚动触发动画（Scroll-Triggered Animations）。不同于与滚动进度完全绑定的 Scroll-Driven 动画，Scroll-Triggered 允许在元素滚动到设定的视口阈值（如完全进入视口）时，直接触发并播放一段常规的、有固定时长的 CSS 动画。通过新属性 timeline-trigger 和 animation-trigger，开发者可以轻松控制动画的触发时机和播放行为（如仅播放一次或随着滚动进出反复触发），进一步减少了对 JavaScript 监听的依赖。</blockquote><a href="https://css-tricks.com/css-scroll-triggered-animations-first-look/" target="_blank"> <div>CSS-Tricks</div> <img class="link_preview_image" alt="A First Look at Scroll-Triggered Animations | CSS-Tricks" src="https://cdn4.telesco.pe/file/BSBWzRtSkb-_mjuUw2pscTRkh56QBPqoIglUBkRbSozalZLXrRyGzyQr7557bAYYzVH5detYFp4hnS9A__W2MxXmSxrZvFF5le68C94JLihpeH2nWX2G3hNckMizLwU3k9PHUhvGtaiGwdaooxA13OUE2wt67AKCCySpifGz-w9EIiOz6PzhbHgyLkUj8vSGRSiaNMq81hG1NRXL3q_PNVRhenkIOOapT8rb0U2MkzS1vw-DcLrgheKuHybikU82-LttmUO5TkGEvMfcyC_Gn42kQilOKChc_B6Pq7XrLIpcejc2tqNOsByMZB7ibZi40UkUp3Bw-LeW6HFpa6CFZA.jpg" loading="lazy" /> <div>A First Look at Scroll-Triggered Animations | CSS-Tricks</div> <div>Let's poke at the differences between scroll-driven and scroll-triggered animations.</div> </a>