CSS过渡不适用于任何浏览器

Question

下面的代码应该在单击适当的链接时产生平滑的滚动效果，以实现页面过渡。
无法正常工作。
页面会按设计更改，但是没有平滑的滚动过渡效果。我研究了执行此操作的代码，但是将其应用于该项目根本无法在任何浏览器中使用。我不知道为什么。任何帮助表示赞赏。

/* Styling of the Layers */

.WrapperContainer {
  z-index: 0;
  width: 100%;
}

.SupportLayerHome {
  background-color: darkorange;
  left: 0;
}

.SupportLayerSignUp {
  background-color: grey;
  left: 500%;
}

.SupportLayerForums {
  background-color: red;
  left: 100%;
}

.SupportLayerArcaneum {
  background-color: blue;
  left: 300%;
}

.SupportLayerBuilds {
  background-color: green;
  left: 200%;
}

.SupportLayerOther {
  background-color: black;
  left: 400%;
}


/* General styling */

nav {
  background-color: #FFF;
  position: fixed;
  width: 100%;
  height: 20px;
  z-index: 1;
}


/* Common Styles */

.BaseLayers {
  position: absolute;
  height: 100%;
  width: 100%;
  color: #FFF;
  -webkit-transition: left 2s ease;
  -o-transition: left 2s ease;
  -moz-transition: left 2s ease;
  transition: left 2s ease;
}

.BaseLayers i {
  position: absolute;
  top: 100px;
}

a[ id="callForums"]:target~#siteContainer section.BaseLayers {
  left: 0;
}

a[ id="callHome"]:target~#siteContainer section.BaseLayers {
  left: 0;
}

a[ id="callBuilds"]:target~#siteContainer section.BaseLayers {
  left: 0;
}

a[ id="callSignUp"]:target~#siteContainer section.BaseLayers {
  left: 0;
}

a[ id="callArcaneum"]:target~#siteContainer section.BaseLayers {
  left: 0;
}

a[ id="callOther"]:target~#siteContainer section.BaseLayers {
  left: 0;
}

<div class="WrapperContainer" id="siteContainer">

  <nav class="navbar nav-justified" id="Navigation">
    <a href="#HomePage" class="nav-link" id="callHome">Home</a>
    <a href="#ForumsPage" class="nav-link" id="callForums">Forums</a>
    <a href="#BuildsPage" class="nav-link" id="callBuilds">Builds</a>
    <a href="#ArcaneumPage" class="nav-link" id="callArcaneum">Arcaneum</a>
    <a href="#OtherPage" class="nav-link" id="callOther">Other</a>
    <a href="#SignUpPage" class="nav-link" id="callSignUp">Sign-up</a>
  </nav>

  <section class="SupportLayerHome BaseLayers" id="HomePage">
    <i>...</i>
  </section>

  <section class="SupportLayerSignUp BaseLayers" id="SignUpPage">
    <i>...</i>
  </section>

  <section class="SupportLayerForums BaseLayers" id="ForumsPage">
    <i>...</i>
  </section>

  <section class="SupportLayerBuilds BaseLayers" id="BuildsPage">
    <i>...</i>
  </section>

  <section class="SupportLayerArcaneum BaseLayers" id="ArcaneumPage">
    <i>...</i>
  </section>

  <section class="SupportLayerOther BaseLayers" id="OtherPage">
    <i>...</i>
  </section>

</div>

编辑： 经过几周的研究，我发现了为什么它不起作用。答案是链接到“在同一页面上”的元素，然后指示该元素执行动画，如下所示：

  

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}


/* Styling of the Layers */

.WrapperContainer {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.Page1 {
  background-color: darkblue;
  color: #FFF;
}

.Page2 {
  background-color: darkorange;
  left: 100%;
  -webkit-transition: left 0.5s linear;
  -moz-transition: left 0.5s linear;
  -o-transition: left 0.5s linear;
  transition: left 0.5s linear;
}

.Page3 {
  background-color: darkgreen;
  left: 100%;
  -webkit-transition: left 0.5s linear;
  -moz-transition: left 0.5s linear;
  -o-transition: left 0.5s linear;
  transition: left 0.5s linear;
}


/* General Styling */

.NavigationLayer {
  height: 5%;
  border-bottom: 2px solid azure;
}

nav {
  position: fixed;
  z-index: 10;
  width: 100%;
}

a[id="Page1"],
a[id="Page2"],
a[id="Page3"] {
  display: none;
}


/* Common Styles */

.BaseLayers {
  width: 100%;
  height: 100%;
  position: absolute;
  padding-top: 2.5%;
}

a[id="Page1"]:target~main>section#PageOne,
a[id="Page2"]:target~main>section#PageTwo,
a[id="Page3"]:target~main>section#PageThree {
  left: 0;
}

a {
  color: white;
}

a:hover {
  color: teal;
}

<!-- Hidden Content -->
<a id="Page1"></a>
<a id="Page2"></a>
<a id="Page3"></a>
<!-- 
End Hidden Content
Start NavBar
-->
<nav class="NavigationLayer" id="Navigation">
  <a href="#Page1" id="callOne">Page One</a>
  <a href="#Page2" id="callTwo">Page Two</a>
  <a href="#Page3" id="callThree">Page Three</a>
</nav>

<main class="WrapperContainer" id="siteContainer">
  <section class="Page1 BaseLayers" id="PageOne">
    <i>Page 1</i>
  </section>
  <section class="Page2 BaseLayers" id="PageTwo">
    <i>Page 2</i>
  </section>
  <section class="Page3 BaseLayers" id="PageThree">
    <i>Page 3</i>
  </section>

Answer 1

没有动画，因为您的:target选择器不起作用。相反，在单击链接时，您将导航到元素的位置，这是单击内部链接时浏览器的正常行为，这可能是您认为它没有动画就可以正常工作的原因。如果返回到代码片段并密切注意x轴滚动条，则应该注意到它在移动而不是在移动。

似乎您正在尝试使用它来检索给定锚标记的目标，但是当元素是当前目标时，将使用此伪类，因此我们可以简单地将:target应用于.nav-link元素以选择它们作为目标。

我已将您的目标选择器替换为以下规则：

.nav-link:target { left: 0; }

但是，请注意，窗口仍会尝试将视图调整为元素的原始位置，这意味着结果有些混乱。

/* Styling of the Layers */

.WrapperContainer {
  z-index: 0;
  width: 100%;
}

.SupportLayerHome {
  background-color: darkorange;
  left: 0;
}

.SupportLayerSignUp {
  background-color: grey;
  left: 500%;
}

.SupportLayerForums {
  background-color: red;
  left: 100%;
}

.SupportLayerArcaneum {
  background-color: blue;
  left: 300%;
}

.SupportLayerBuilds {
  background-color: green;
  left: 200%;
}

.SupportLayerOther {
  background-color: black;
  left: 400%;
}


/* General styling */

nav {
  background-color: #FFF;
  position: fixed;
  width: 100%;
  height: 20px;
  z-index: 1;
}


/* Common Styles */

.BaseLayers {
  position: absolute;
  height: 100%;
  width: 100%;
  color: #FFF;
  -webkit-transition: left 2s ease;
  -o-transition: left 2s ease;
  -moz-transition: left 2s ease;
  transition: left 2s ease;
}

.BaseLayers i {
  position: absolute;
  top: 100px;
}

:target { left: 0; }

<div class="WrapperContainer" id="siteContainer">

  <nav class="navbar nav-justified" id="Navigation">
    <a href="#HomePage" class="nav-link" id="callHome">Home</a>
    <a href="#ForumsPage" class="nav-link" id="callForums">Forums</a>
    <a href="#BuildsPage" class="nav-link" id="callBuilds">Builds</a>
    <a href="#ArcaneumPage" class="nav-link" id="callArcaneum">Arcaneum</a>
    <a href="#OtherPage" class="nav-link" id="callOther">Other</a>
    <a href="#SignUpPage" class="nav-link" id="callSignUp">Sign-up</a>
  </nav>

  <section class="SupportLayerHome BaseLayers" id="HomePage">
    <i>...</i>
  </section>

  <section class="SupportLayerSignUp BaseLayers" id="SignUpPage">
    <i>...</i>
  </section>

  <section class="SupportLayerForums BaseLayers" id="ForumsPage">
    <i>...</i>
  </section>

  <section class="SupportLayerBuilds BaseLayers" id="BuildsPage">
    <i>...</i>
  </section>

  <section class="SupportLayerArcaneum BaseLayers" id="ArcaneumPage">
    <i>...</i>
  </section>

  <section class="SupportLayerOther BaseLayers" id="OtherPage">
    <i>...</i>
  </section>

</div>

Answer 2

此幻灯片显示技术与您要在此处实现的功能非常接近，但使用少量的jQuery触发转换。

http://css3.bradshawenterprises.com/sliding/