使用 CSS 从一个页面移动到另一个页面时如何触发转换？

Question

我正在尝试添加从一个页面移动到另一页面时触发的动画过渡，仅使用 CSS，不使用 JavaScript、jQuery 或任何其他脚本。我对此进行了相当多的研究，从我所看到的来看，大多数过渡都使用悬停伪类或需要一些脚本。 我使用了 CSS3 关键帧并且它有效，但我认为如果可能的话我应该只使用过渡属性。 我尝试使用伪类 :active 和 :target 但当我单击链接时它似乎只是发生变化，它不是移动到其他页面时发生的转换。仅使用 CSS 从一个页面移动到另一个页面时如何触发转换？

这是我正在使用的代码：

HTML：

<nav class="sitenavigation">
     <ul>
        <li><a href="link1.html">Text</a></li>
        <li><a href="link2.html">Text</a></li>
        <li><a href="link3.html">Text</a></li>
        <li><a href="link4.html">Text</a></li>
        <li><a href="link5.html">Text</a></li>
        <li><a href="link6.html">Text</a></li>
    </ul>
</nav>`

CSS：

nav.sitenavigation:a 
{
text-align: center;
margin: 0.5em 0.7em 0.5em 0.7em;
font-size: 1.15em; 
color: #f0f5f5; 
background-color: #75a3a3;
font-family: Merienda;

-webkit-transition: all 1.5s ease;
-moz-transition: all 1.5s ease;
-o-transition: all 1.5s ease;
transition: all 1.5s ease;
}

nav.sitenavigation a:active, nav.sitenavigation a:target {
color: #293d3d;  
}

Answer 1

您现在可以使用 @view-transition 来做到这一点。请参阅前面提到的页面链接到的示例：https://mdn.github.io/dom-examples/view-transitions/mpa/