view-transition是一个很专业的功能，可以通过CSS去实现网页动画，在跨网页浏览上启用view-transition，无需多余配置即可获得一个优雅的网站页面切换效果。

适用于多页面应用的跨文档视图过渡 | View Transitions | Chrome for Developers

开始在您的多页应用 (MPA) 中使用跨文档视图过渡。

Chrome for DevelopersX

demo：

Home

camelCase

配置

在Code injection里面添加如下代码即可：

<style>  

    @view-transition {
	navigation: auto;
    }  
   ::view-transition-group(root){
     animation-duration:600ms
   }
   
</style>

如果你还想更丰富的动画，可以参考下面的几个方案：

滑动进入 + 淡出

<style>  

    @view-transition {
        navigation: auto;
    }

    /* 旧页面：向左滑出并淡出 */
    ::view-transition-old(root) {
        animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
                   300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
    }

    /* 新页面：从右侧滑入并淡入 */
    ::view-transition-new(root) {
        animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
                   300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
    }

    @keyframes fade-in {
        from { opacity: 0; }
    }

    @keyframes fade-out {
        to { opacity: 0; }
    }

    @keyframes slide-from-right {
        from { transform: translateX(30px); }
    }

    @keyframes slide-to-left {
        to { transform: translateX(-30px); }
    }

</style>

上下滑动

<style>  

        @view-transition {
        navigation: auto;
    }

    ::view-transition-old(root) {
        animation: 0.4s ease-in both move-out;
    }

    ::view-transition-new(root) {
        animation: 0.4s ease-in both move-in;
    }

    @keyframes move-out {
        from { transform: translateY(0%); }
        to { transform: translateY(-100%); }
    }

    @keyframes move-in {
        from { transform: translateY(100%); }
        to { transform: translateY(0%); }
    }
   
</style>

缩放 + 淡入

<style>  

        @view-transition {
        navigation: auto;
    }

    ::view-transition-old(root) {
        animation: 300ms ease-out both scale-down;
    }

    ::view-transition-new(root) {
        animation: 400ms ease-out 100ms both scale-up;
    }

    @keyframes scale-down {
        to {
            opacity: 0;
            transform: scale(0.9);
        }
    }

    @keyframes scale-up {
        from {
            opacity: 0;
            transform: scale(0.9);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }
   
</style>

圆形扩散

1.在 Code Injection 的 Header 中添加 CSS

<style>  

        @view-transition {
        navigation: auto;
    }

    /* 旧状态禁用默认动画 */
    ::view-transition-old(*) {
        animation: none;
    }

    /* 新状态应用圆形裁剪扩散 */
    ::view-transition-new(*) {
        animation: clip 0.6s ease-in;
    }

    @keyframes clip {
        from {
            clip-path: circle(0% at var(--x) var(--y));
        }
        to {
            clip-path: circle(var(--r) at var(--x) var(--y));
        }
    }
   
</style>

2.在 Footer 中添加 JavaScript

<script>
document.addEventListener('click', (e) => {
    // 只对内部链接生效
    const link = e.target.closest('a[href]');
    if (!link || !link.href.includes(window.location.origin)) return;
    
    const x = e.clientX;
    const y = e.clientY;
    
    // 计算覆盖整个视窗的最小圆半径
    const endRadius = Math.hypot(
        Math.max(x, window.innerWidth - x),
        Math.max(y, window.innerHeight - y)
    );
    
    document.documentElement.style.setProperty('--x', x + 'px');
    document.documentElement.style.setProperty('--y', y + 'px');
    document.documentElement.style.setProperty('--r', endRadius + 'px');
});
</script>