现在我也不知道这频道发了啥了，各位慢慢吃瓜，将就着看联系我请去 @abc1763613206友链儿@cyberElaina@rvalue_daily@billchenlahttps://broadcastchannel-ajj.pages.devhttps://broadcastchannel-ajj.pages.dev/posts/7457https://broadcastchannel-ajj.pages.dev/posts/7457Sun, 21 Jun 2026 08:21:47 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%8A%A8%E7%94%BB">#动画</a> <a href="/search/%23%E5%89%8D%E7%AB%AF">#前端</a><br /><a href="https://master.dev/blog/in-n-out-animations-popovers-part-2-3/" target="_blank">In-N-Out Animations: Popovers (Part 2/3) | Master.dev</a>：利用 CSS 新特性给 Popover API 元素添加平滑的进出场动画。<br /><br /><blockquote>AI 摘要：文章展示了如何将 Dialog 动画的“3-2-1”级联规则（利用 <a href="https://t.me/starting" target="_blank">@starting</a>-style 和 :popover-open）复用到原生 popover 上，实现从 display: none 展开时的平滑过渡。此外还介绍了针对 prefers-reduced-motion 的减弱动画适配，以及解决 Safari 浏览器在退场动画中丢失锚点定位的兼容小妙招。</blockquote><br /><br /><a href="https://master.dev/blog/in-n-out-animations-view-transitions-part-3-3/" target="_blank">In-N-Out Animations: View Transitions (Part 3/3) | Master.dev</a>：使用 View Transitions API 优雅解决 DOM 节点真实增删时的进出场动画难题。<br /><br /><blockquote>AI 摘要：针对元素在 DOM 中真正被创建或销毁时（传统动画的 Hard Mode）的退场动画，文章介绍了使用 View Transitions API 的解决方案。通过 document.startViewTransition 结合 ::view-transition-new() / ::view-transition-old() 和 <a href="https://t.me/keyframes" target="_blank">@keyframes</a>，即可用极简的代码实现极其丝滑的淡入淡出及位移效果。</blockquote><a href="https://master.dev/blog/in-n-out-animations-popovers-part-2-3/" target="_blank"> <div>master.dev</div> <img class="link_preview_image" alt="In-N-Out Animations: Popovers (Part 2/3)" src="/static/https://cdn4.telesco.pe/file/l79As8iWqIk1vl-eS3je5Swv0y8TdaTUt1HC2EldiF5RvuOdkjOzReJQwCx2PEdRkge8yLKNWL7-8ntQs-Vahbd_FeRQuaDT8i4NYiTnuT43t8XIq1laXLtjWjzDeZwhucp_Kiw-LMbT0RJxNZ1e3HvNkZDfAxYEMGEbZfoClq0gPdhUlvMBh0ehmJG7RwA8y1ibFNiRO928LkpTQXnrz7GjGZnNglCWdsndVq6oNL_IodbFOKr_mJ6KOg-_w2VSEC1M1C83IEEHbE8daCDr-P0ltA5N-pyAnW_BJV-nypmvtIJPgOu9TD0tAs1206796YS6iFgLwwWq0B4k8n_PNQ.jpg" loading="lazy" /> <div>In-N-Out Animations: Popovers (Part 2/3)</div> <div>Using our 3, 2, 1 state system, we can make popovers animate on</div> </a>https://broadcastchannel-ajj.pages.dev/posts/7456https://broadcastchannel-ajj.pages.dev/posts/7456Sun, 21 Jun 2026 08:21:47 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="/static/https://cdn4.telesco.pe/file/AuDkOGu9n97H9_KQAZtGth-fYMVR_Fk81BpR_wcrFzWhYWqiR8SLmDIqvAF2TRH2GaYlkRNiDw2j9F-bndr9QPERXk37BRzSdClErhik8pTQco3DCqc8Ln4pvN0u-Uzn2II42BuvnuRlmjWgEbyIrbPQjKUjZivgbgqjPzg2T6P53cy37ZGjMvsGdxfyozkM1g1kVFYjmv7OdfJKlrYyecEGFljHn6lZPIk5tibRoPNsMl8V47RFOXpb65U8v2Fgk93-rVtCUOTBZM_89MgDs_aY8ZzijY_qzkszp_6N9Rll4mNGmV_dvUD9T_Wg1DsNvlzGnE7OW_RD-zdA1D_eMw.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>https://broadcastchannel-ajj.pages.dev/posts/7326https://broadcastchannel-ajj.pages.dev/posts/7326Mon, 18 May 2026 11:26:30 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%E6%96%B0%E5%8A%A8%E6%80%81">#新动态</a><br /><a href="https://developer.chrome.com/blog/gap-decorations-stable?hl=en" target="_blank">Gap decorations: Now available in Chromium | Chrome for Developers</a>：CSS 终于原生支持给 Flex/Grid 间隙加分割线了，再也不用手写各种伪元素和 Border Hack 啦！Chrome 149 正式引入 CSS Gap Decorations。<br /><br /><blockquote>AI 摘要：Chrome 149 正式引入 CSS Gap Decorations，新增 row-rule 和 column-rule 属性。开发者现在可以像使用 column-rule 处理多列布局一样，直接为网格（Grid）和弹性盒（Flex）布局的间距添加分割线。该功能支持复杂的样式重复（repeat()）、动画效果以及交叉点断开控制（rule-break），极大简化了 UI 分割线的实现逻辑。</blockquote><a href="https://developer.chrome.com/blog/gap-decorations-stable?hl=en" target="_blank"> <div>Chrome for Developers</div> <img class="link_preview_image" alt="Gap decorations: Now available in Chromium  |  Blog  |  Chrome for Developers" src="/static/https://cdn4.telesco.pe/file/N-3esC5W5g1pNH271XeLEz_ewPBcZeDFWSriofzVp7f3ZNNNRsae3epRKAuEQaklMOwIG3QhN1Gg4kIalelzQwtkyvr952i8cMuIJtFajkbVX_1hy9r6KHJb4aWXHwnTzc-n8JN_x3HzK-BJtzOpv6QMV7OBwm7damu4PX_R71KQ7huZe_U9C335rTrR1pbgJcb7kcAfe8QeoDMB3sIkTkJpbs37LjBloUF7wHQeZisUqqj_q7Ns2ySFtwVvM4dC1ELuyCA-Tyj1FDU-7uCr5r9D7xhzm6hMcdzxDNQsfsNjqpftS-H9P9DWz5wyDOQGK4wszrStrwdXrLhjoOk_Kg.jpg" loading="lazy" /> <div>Gap decorations: Now available in Chromium  |  Blog  |  Chrome for Developers</div> <div>A new way to style gaps in CSS from Chrome and Edge 149.</div> </a>