AI 摘要：本文介绍了如何利用复制动画到 ::view-transition-group，实现元素边框圆角、背景和边框的平滑过渡。

文章聚焦于 View Transitions 中元素状态转换时遇到的边框圆角（border-radius）动画问题。作者通过具体的 Demo 展示了当同一元素转换时，由于使用快照的特性，会导致圆角动画无法自然过渡，而是简单地淡出替换。为了解决这一问题，作者提出了将动画效果复制到 ::view-transition-group 内的方法，通过自定义关键帧（keyframes），实现圆角、背景以及边框等 CSS 属性的平滑过渡。文章还介绍了如何应对背景颜色变化和边框宽度变化的场景，解释了设置 overflow、box-sizing 以及隐藏部分快照的必要性，从而使动画效果达到最佳。最后，作者总结了如何通过分别捕获背景和前景，进而在 View Transition 中获得更理想的动画效果，并呼吁读者在社交媒体上分享此技术。

Bram.us

View Transitions Applied: Smoothly animating a border-radius with a View Transition

To smoothly animate things like borders as part of a View Transition, you need to duplicate that animation onto the ::view-transition-group. For best effect, have the View Transition separately capture the background and foreground of the element you’re animating.