<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 || anchors[idx].pathname === window.location.pathname) { continue; } 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> <style> #fader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999999; pointer-events: none; background: white; animation-duration: 300ms; animation-timing-function: ease-in-out; } #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; } </style>