Fade out div when click on javascript:history.back()

Question

I've loaded a fadeIn css animation, but when I click the close button the block (naturally) disappears in a flash. Is there a way to reverse the animation when the user clicks the "close"-link (with value javascript:history.back())?

Demo

#showme:target {
    display: block;
    position: fixed;
    width: 100%; height: 100%;
    top: 0; left; 0;
    background: lightblue;
    -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;
}

Answer 1

I would use jquery for the animation part, but I'm unsure as to why you would use this animation with history.back(). The following solution eliminates a lot of extra css as well.

html:

<div id="showme" style="display:none;">
    <p>I'm showing</p>
    <p><a href="#" id="close">Close</a></p>
</div>

<div id="wrapper">
    <a id="show" href="#">Show</a>
</div>

js:

$('#close').on('click', function(event) {
    event.preventDefault();
    $('#showme').fadeOut('slow');
});

$('#show').on('click', function(event) {
    event.preventDefault();
    $('#showme').fadeIn('slow');
});

css:

body {margin: 0;}

#showme {
    display: block;
    position: fixed;
    width: 100%; height: 100%;
    top: 0; left; 0;
    background: lightblue;
}

fiddle: http://jsfiddle.net/cmqg7cyf/4/