跳转页面时的css动画

跳转页面时可以使用CSS动画来增加视觉效果和交互体验。以下是一种常见的方法：

1. 首先，在CSS文件中定义一个动画的关键帧（keyframes）：

@keyframes pageTransition {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

这个动画会从页面完全可见（opacity为1）到完全隐藏（opacity为0）。

2. 接下来，给需要跳转的元素添加一个类名，例如`page-transition`：

<div class="page-transition">跳转内容</div>

3. 在CSS中为这个类名添加过渡效果和动画属性：

.page-transition {
    animation: pageTransition 0.5s ease-in-out;
}

这里的`0.5s`表示动画持续时间为0.5秒，`ease-in-out`表示动画以缓入缓出的方式进行。

4. 最后，在页面跳转时，通过一些方式给需要跳转的元素添加上这个类名。可以使用JavaScript来实现，例如：

document.querySelector('.page-transition').classList.add('page-transition');

这样，在页面跳转时，元素就会添加上动画类名，并触发CSS动画效果。

当页面加载完成后，动画就会自动播放，实现页面跳转时的CSS动画效果。你可以根据需要自定义关键帧和样式属性，来实现不同的动画效果。