AI 摘要：文章展示了如何将 Dialog 动画的“3-2-1”级联规则（利用 @starting-style 和 :popover-open）复用到原生 popover 上，实现从 display: none 展开时的平滑过渡。此外还介绍了针对 prefers-reduced-motion 的减弱动画适配，以及解决 Safari 浏览器在退场动画中丢失锚点定位的兼容小妙招。

AI 摘要：针对元素在 DOM 中真正被创建或销毁时（传统动画的 Hard Mode）的退场动画，文章介绍了使用 View Transitions API 的解决方案。通过 document.startViewTransition 结合 ::view-transition-new() / ::view-transition-old() 和 @keyframes，即可用极简的代码实现极其丝滑的淡入淡出及位移效果。

master.dev

In-N-Out Animations: Popovers (Part 2/3)

Using our 3, 2, 1 state system, we can make popovers animate on

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

CSS-Tricks

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

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

AI 摘要：2026 年 5 月，Socket Research Team 发现 @antv 系列 npm 包遭到供应链攻击，攻击者发布恶意版本，通过 postinstall 脚本窃取环境变量和 npm token，影响 @antv/g6、@antv/util 等多个核心包，建议用户立即版本锁定并轮换密钥。

1. 攻击事件概览
• 2026 年 5 月 11–19 日期间，大量 @antv 子包集中发布恶意版本，时间戳显示攻击窗口集中。
• Socket 安全团队通过实时包监控（package monitoring）发现异常发布行为并发出警报。

2. 攻击手法与技术细节
• 恶意代码嵌入 postinstall 钩子，安装时自动执行，窃取系统环境变量、npm token 及敏感配置。
• 攻击者利用泄露的维护者凭据或通过社会工程学获取 npm 发布权限。

3. 受影响包范围
• 涉及 @antv/scale、@antv/attr、@antv/component、@antv/g6 等数十个包的多个版本。
• 所有在 2026-05-11 至 2026-05-19 时间窗口内发布的版本均为恶意版本。

4. 紧急缓解措施
• 锁定依赖版本，避免使用上述时间窗口内的版本。
• 运行 npm audit 或使用 Socket 工具扫描项目并移除受影响包。
• 立即轮换所有可能泄露的 npm token、环境变量及 API 密钥。
• 关注 AntV 官方后续安全公告，升级到修复后的版本。

Socket

Mini Shai-Hulud Hits @antv Ecosystem, 639 Compromised npm Pa...

Active npm supply chain attack compromises @antv packages in a fast-moving malicious publish wave tied to Mini Shai-Hulud.

AI 摘要：Chrome 149 正式引入 CSS Gap Decorations，新增 row-rule 和 column-rule 属性。开发者现在可以像使用 column-rule 处理多列布局一样，直接为网格（Grid）和弹性盒（Flex）布局的间距添加分割线。该功能支持复杂的样式重复（repeat()）、动画效果以及交叉点断开控制（rule-break），极大简化了 UI 分割线的实现逻辑。

Chrome for Developers

Gap decorations: Now available in Chromium  |  Blog  |  Chrome for Developers

A new way to style gaps in CSS from Chrome and Edge 149.