/* The fader element must cover the whole screen initially */
#fader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    /* This color should match your background to hide the transition */
    background: #ffffff; 
    /* Set the initial state to invisible */
    opacity: 0;
    /* Add the transition property */
    transition: opacity 0.5s ease-in-out; 
    /* The animation duration should match the one used below */
    animation-duration: 0.5s; 
    animation-fill-mode: forwards;
}

/* 1. When a link is clicked, this covers the page */
.fade-in {
    animation-name: page-fade-in;
}

/* 2. On initial page load, this makes the page content visible */
.fade-out {
    animation-name: page-fade-out;
}

/* Define the animations */
@keyframes page-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

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