CSS transition not working in any browser - css

Question

The following code is supposed to produce a smooth scrolling effect to page transition when the appropriate link is clicked.
It is not working as intended.
The page changes as designed, but the smooth scrolling transition effect is not there. I have researched a code which does that but when applied to the project is does not work at all in any browser. I could not find out why. Any help is appreciated.
/* 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">
Home
Forums
Builds
Arcaneum
Other
Sign-up
</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>
EDIT:
After some weeks and research I have found out why it is not working. The answer is to link to an element "on the same page" and then instruct that element to perform the animation like it is represented here:
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">
Page One
Page Two
Page Three
</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

There is no animation because your :target selectors aren't working. Instead, when clicking on the link you are being navigated to the position of the element, which is the normal browser behavior when clicking an internal link, which probably had you thinking that it was working without the animation. If you go back to your snippit and pay close attention to x-axis scrollbar, you should notice it moving rather than the element.
It seems like you're trying to use it to retrieve the target of a given anchor tag, however this pseudo-class is used when the element is the current target, so instead we can simply apply :target to the .nav-link elements to select them when they are the target.
I've replaced your target selectors with this rule:
.nav-link:target { left: 0; }
Note, however, that the window still attempts to adjust the view to the original location of the element, meaning the result is a little disorienting.
/* 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">
Home
Forums
Builds
Arcaneum
Other
Sign-up
</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

This slideshow technique is pretty close to what you are trying to achieve here but uses a small amount of jQuery to trigger the transitions.
http://css3.bradshawenterprises.com/sliding/