现在我也不知道这频道发了啥了，各位慢慢吃瓜，将就着看联系我请去 @abc1763613206友链儿@cyberElaina@rvalue_daily@billchenlahttps://channel.0w0.besthttps://channel.0w0.best/posts/7456https://channel.0w0.best/posts/7456Sun, 21 Jun 2026 08:21:47 GMT<div class="tgme_widget_message_forwarded_from accent_color">Forwarded from <a class="tgme_widget_message_forwarded_from_name" href="https://t.me/cosine_front_end/3827" target="_blank" rel="noopener"><span>cosine - 前端人の日常频道</span></a></div><a href="/search/result?q=%23%E4%BC%98%E8%B4%A8%E5%8D%9A%E6%96%87" title="#优质博文">#优质博文</a> <a href="/search/result?q=%23CSS" title="#CSS">#CSS</a> <a href="/search/result?q=%23%E5%89%8D%E7%AB%AF" title="#前端">#前端</a> <a href="/search/result?q=%23%E5%8A%A8%E7%94%BB" title="#动画">#动画</a> <a href="/search/result?q=%23course" title="#course">#course</a><br /><a href="https://css-tricks.com/css-scroll-triggered-animations-first-look/" target="_blank" rel="noopener" title="A First Look at Scroll-Triggered Animations">A First Look at Scroll-Triggered Animations</a>：Chrome 146 率先支持了纯 CSS 的滚动触发动画，让开发者不用 JS 也能实现类似 Intersection Observer 的元素入场动画。<br /><br /><div class="tg-expandable"> <input type="checkbox" id="expand-0-0" class="tg-expandable__checkbox" aria-label="Toggle hidden content" aria-controls="expand-0-0-content" /> <div id="expand-0-0-content" class="tg-expandable__content">AI 摘要：文章介绍了 Chrome 146 引入的新特性：滚动触发动画（Scroll-Triggered Animations）。不同于与滚动进度完全绑定的 Scroll-Driven 动画，Scroll-Triggered 允许在元素滚动到设定的视口阈值（如完全进入视口）时，直接触发并播放一段常规的、有固定时长的 CSS 动画。通过新属性 timeline-trigger 和 animation-trigger，开发者可以轻松控制动画的触发时机和播放行为（如仅播放一次或随着滚动进出反复触发），进一步减少了对 JavaScript 监听的依赖。</div> <label for="expand-0-0" class="tg-expandable__toggle"><span class="sr-only">Toggle hidden content</span></label> </div><a class="tgme_widget_message_link_preview" href="https://css-tricks.com/css-scroll-triggered-animations-first-look/" target="_blank" rel="noopener" title="Let's poke at the differences between scroll-driven and scroll-triggered animations."> <div class="link_preview_site_name accent_color">CSS-Tricks</div> <img class="link_preview_image" alt="A First Look at Scroll-Triggered Animations | CSS-Tricks" src="/static/https://cdn4.telesco.pe/file/CEfhKn0N1FClP7GM6wF-sIGs7yoGOVyjfl8ci9GR6JSSHMTKGt0_PwNi5EHXtUi6MKmUPvyZNjBdbsU2msUoF4xggHowDopo_FQBz41WVy4w9I_PdBH4W8sv5SZRcBDKTlEAIRbYrzdfmjRXx3iL0i3yjdK5ZnmSPf1jhdFFCpa4dB9HnPgY0ewnlYxfenYVu1388K2s0Gyj9Wtl0_faowCROsiNmBFH_M68LLFOw1eEHn64U9q4t2KEkQR-PjUY4MusNNGF8vUJVAKjak2wkzMHjcejaICqz-8ZIyjlxsD8hP0XMcQ3Fc_7H6VI9T9j4zHnOvv9fKX7Lv8nVDBKwQ.jpg" width="1200" height="630" loading="eager" /> <div class="link_preview_title">A First Look at Scroll-Triggered Animations | CSS-Tricks</div> <div class="link_preview_description">Let's poke at the differences between scroll-driven and scroll-triggered animations.</div> </a>