Page fade in/out animation not working with javascript:history.back()

I have a script that allows each page to fade out upon leaving the page and fade in upon selecting a href to another page. However when using javascript:history.back() to return to a previous page, the animation remains full page, rendering the page content inaccessible. I'll post my code.. any help would be much appreciated : )

     #fader {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
  pointer-events: none;                                                            background:linear-gradient(-45deg, rgb(233, 233, 233), rgb.(226,225, 225), rgb(253, 253, 253), rgb(216, 214, 214));
animation-duration: 700ms;
animation-timing-function: ease-in-out;
-webkit-animation: Gradient 700ms; 
-moz-animation: Gradient 700ms; 
animation: Gradient 700ms;
}

@-webkit-keyframes Gradient {
0% {
    background-position: 0% 50%
}
50% {
    background-position: 100% 50%
}
100% {
    background-position: 0% 50%
}
}

@-moz-keyframes Gradient {
0% {
    background-position: 0% 50%
}
50% {
    background-position: 100% 50%
}
100% {
    background-position: 0% 50%
}
}

@keyframes Gradient {
0% {
    background-position: 0% 50%
}
50% {
    background-position: 100% 50%
}
    100% {
    background-position: 0% 50%
    }
  }

  #fader:before {
  content: 'fade'
  }

  @keyframes fade-out {
  from { opacity: 1 }
  to { opacity: 0 }
   }

    @keyframes fade-in {
    from { opacity: 0 }
    to { opacity: 1 }
     }

     #fader.fade-out {
     opacity: 0;
     animation-name: fade-out;
     }

      #fader.fade-in {
      opacity: 1;
      animation-name: fade-in;
      }



 <script>
            function fadeInPage() {
              if (!window.AnimationEvent) { return; }
              var fader = document.getElementById('fader');
              fader.classList.add('fade-out');
            }

            document.addEventListener('DOMContentLoaded', function() {
              if (!window.AnimationEvent) { return }

              var anchors = document.getElementsByTagName('a');

              for (var idx=0; idx<anchors.length; idx+=1) {
                if (anchors[idx].hostname !== window.location.hostname) {
                  return;
                }

                anchors[idx].addEventListener('click', function(event) {
                  var fader = document.getElementById('fader'),
                      anchor = event.currentTarget;

                  var listener = function() {
                    window.location = anchor.href;
                    fader.removeEventListener('animationend', listener);
                  };
                  fader.addEventListener('animationend', listener);

                  event.preventDefault();
                  fader.classList.add('fade-in');
                });
              }
            });

            window.addEventListener('pageshow', function (event) {
              if (!event.persisted) {
                return;
              }
              var fader = document.getElementById('fader');
              fader.classList.remove('fade-in');
            });
          </script>
        </head>

        <body>
          <svg id="fader"></svg>
          <script>
              fadeInPage();
          </script>
          <p>content</p>
          </body>

Solution

Your question is little confusing but this works for me. I hope this is what you are looking.

function fadeInPage() {
  if (!window.AnimationEvent) {
    return;
  }
  var fader = document.getElementById("fader");
  fader.classList.add("fade-out");
}

document.addEventListener("DOMContentLoaded", function() {
  if (!window.AnimationEvent) {
    return;
  }

  var anchors = document.getElementsByTagName("a");

  for (var idx = 0; idx < anchors.length; idx += 1) {
    if (anchors[idx].hostname !== window.location.hostname) {
      return;
    }

    anchors[idx].addEventListener("click", function(event) {
      var fader = document.getElementById("fader"),
        anchor = event.currentTarget;

      var listener = function() {
        window.location = anchor.href;
        fader.removeEventListener("animationend", listener);
      };
      fader.addEventListener("animationend", listener);

      event.preventDefault();
      fader.classList.add("fade-in");
    });
  }
});

window.addEventListener("pageshow", function(event) {
  if (!event.persisted) {
    return;
  }
  var fader = document.getElementById("fader");
  fader.classList.remove("fade-in");
});

fadeInPage();

#fader {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
  pointer-events: none;
  background: linear-gradient( -45deg, rgb(233, 233, 233), rgb(226, 225, 225), rgb(253, 253, 253), rgb(216, 214, 214));
  animation-duration: 700ms;
  animation-timing-function: ease-in-out;
  -webkit-animation: Gradient 700ms;
  -moz-animation: Gradient 700ms;
  animation: Gradient 700ms;
}

@-webkit-keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@-moz-keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

#fader:before {
  content: "fade";
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#fader.fade-out {
  opacity: 0;
  animation-name: fade-out;
}

#fader.fade-in {
  opacity: 1;
  animation-name: fade-in;
}

<svg id="fader"></svg>
<p>content</p>
<a href="http://www.google.com">Google</a>