如何使用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;  
}