#优质博文 #CSS #动画 #前端In-N-Out Animations: Popovers (Part 2/3) | Master.dev：利用 CSS 新特性给 Popover API 元素添加平滑的进出场动画

Sun, 21 Jun 2026 08:21:47 GMT

#优质博文 #CSS #动画 #前端
In-N-Out Animations: Popovers (Part 2/3) | Master.dev：利用 CSS 新特性给 Popover API 元素添加平滑的进出场动画。

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

In-N-Out Animations: View Transitions (Part 3/3) | Master.dev：使用 View Transitions API 优雅解决 DOM 节点真实增删时的进出场动画难题。

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

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

Sun, 21 Jun 2026 08:21:47 GMT

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 监听的依赖。

CSS-Tricks

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

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

动画 | 今天abc看了啥🤔

#优质博文 #CSS #动画 #前端In-N-Out Animations: Popovers (Part 2/3) | Master.dev：利用 CSS 新特性给 Popover API 元素添加平滑的进出场动画

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