Firing jQuery function to run at same time as a CSS3 animation

[tdrsam]

I'm trying to make a page transition and I've got a CSS3 animation that works well enough. This one:

@keyframes myfadeInAnimation {
from { -webkit-transform: translateY(1000px); transform: translateY(1000px); }
to { -webkit-transform: translateY(10px); transform: translateY(10px); }
}

section{
-webkit-animation: myfadeInAnimation .9s ease-in-out both;
animation: myfadeInAnimation .9s ease-in-out both;
}

But it makes the current page disappear before the animation runs, so I'm trying to make a little jQuery function to make the current page fade out, so that it will appear to remain there until the new page slides in.

This jQuery function isn't doing anything:

$(window).unload(function() {
    event.preventDefault();
    linkLocation = this.href;
    $("section").fadeOut(4000, redirectPage);      
        
    function redirectPage() {
        window.location = linkLocation;
    }
});

Do I need ajax, or something?

[tdrsam]

The solution I found for this was to use a plugin instead of making a custom function.