CSS transition not working in any browser

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;
}



  
    Home
    Forums
    Builds
    Arcaneum
    Other
    Sign-up
  

  
    ...
  

  
    ...
  

  
    ...
  

  
    ...
  

  
    ...
  

  
    ...

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;
}







  Page One
  Page Two
  Page Three



  
    Page 1
  
  
    Page 2
  
  
    Page 3

msg45f · Accepted Answer

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; }



  
    Home
    Forums
    Builds
    Arcaneum
    Other
    Sign-up
  

  
    ...
  

  
    ...
  

  
    ...
  

  
    ...
  

  
    ...
  

  
    ...

CSS transition not working in any browser

Answers (2)

Related Questions