I've got a page similar to the one below. As you can see, when you click on the links, the blue panel fades in. You can click the "X" icon in the top right corner and it will close. However, I'm trying to figure out how to fade out the close, just as I faded the panel in. I know I could do it in JavaScript, but I'd really like to just use CSS if possible.

For those of you using browser that use the .eot font format, you can download that font here to support the close button. CodingForums.com wouldn't let me upload for some reason, sorry.

Code:
<!DOCTYPE html>
<html lang="en-us">
<head>
    <title>Sample Page</title>
    <meta charset="utf-8" />
    <style type="text/css">
        /* Make stuff easier on the eyes */
        body {background:#ddd;margin:0px;font-size:32px;font-family:sans-serif;}
        a:link {color: DimGray;}
        a:visited {color: DimGray;}
        a:hover {color: DarkSlateGray;}
        a:active {color: DarkSlateGray;}
        #menu {position:absolute;top:100px;left:300px;}
        .panel {color: white;}
        p {margin-left: 32px;}
        
        /* Panel Transitions */
        .panel {
	        min-width: 100%;
	        height: 100%;
	        overflow-y: auto;
	        overflow-x: hidden;
	        position: absolute;
	        margin-top: -150%;
	        background-color: #00d;
	        opacity: 0;
	        z-index:2;
	        -webkit-transition: opacity .6s ease-in-out;
	        -moz-transition: opacity .6s ease-in-out;
	        -o-transition: opacity .6s ease-in-out;
	        -ms-transition: opacity .6s ease-in-out;
	        transition: opacity .6s ease-in-out;
        }
        .panel:target {
	        opacity: 1;
	        margin-top: 0%;
        }
        
        /* Allows me to use the X close icon */
        @font-face {
            font-family: 'close';
            src: url('icon.eot');
        }
        @font-face {
	        font-family: 'close';
	        src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggi/LYAAAC8AAAAYGNtYXAaVcxXAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5ZnF2RxAAAAFwAAAArGhlYWT/7qNNAAACHAAAADZoaGVhA+IB5gAAAlQAAAAkaG10eAMAAAAAAAJ4AAAAFGxvY2EAKABqAAACjAAAAAxtYXhwAAgAKAAAApgAAAAgbmFtZUQYtNYAAAK4AAABOXBvc3QAAwAAAAAD9AAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADmAAHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIOYA//3//wAAAAAAIOYA//3//wAB/+MaBAADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAgAA/+ACAAHgABQAJQAAASIOAhUUHgIzMj4CNTQuAiMXBxcVIycHIzU3JzUzFzczFQEANV1GKChGXTU1XUYoKEZdNYBTUy1TUy1TUy1TUy0B4ChGXTU1XUYoKEZdNTVdRiitU1MtU1MtU1MtU1MtAAEAAAABAACAH0lgXw889QALAgAAAAAAz2exSAAAAADPZ7FIAAD/4AIAAeAAAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAAgAAAQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAABAAAAAgAAAAAAAAAACgAUAB4AVgABAAAABQAmAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoAKABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoAKABjAGkAYwBvAG0AbwBvAG4AVgBlAHIAcwBpAG8AbgAgADEALgAwAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG4AUgBlAGcAdQBsAGEAcgBpAGMAbwBtAG8AbwBuAEcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'),
		         url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAARsAAoAAAAABCQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAO4AAADu4xN/dk9TLzIAAAHkAAAAYAAAAGAIIvy2Y21hcAAAAkQAAABMAAAATBpVzFdnYXNwAAACkAAAAAgAAAAIAAAAEGhlYWQAAAKYAAAANgAAADb/7qNNaGhlYQAAAtAAAAAkAAAAJAPiAeZobXR4AAAC9AAAABQAAAAUAwAAAG1heHAAAAMIAAAABgAAAAYABVAAbmFtZQAAAxAAAAE5AAABOUQYtNZwb3N0AAAETAAAACAAAAAgAAMAAAEABAQAAQEBCGljb21vb24AAQIAAQA6+BwC+BsD+BgEHgoAGVP/i4seCgAZU/+LiwwHi2v4lPh0BR0AAAB2Dx0AAAB7ER0AAAAJHQAAAOUSAAYBAQgPERMWG2ljb21vb25pY29tb29udTB1MXUyMHVFNjAwAAACAYkAAwAFAQEEBwoNYvyUDvyUDvyUDvuUDveU+HQV+yGL+wf7B4v7IYv7IfcH+wf3IYv3IYv3B/cHi/chi/ch+wf3B/shiwj3FPtBFTg43jiLXl6LON44OF6Li7je3jjei7i4i9443t64i4teBQ74lBT4lBWLDAoAAAADAgABkAAFAAABTAFmAAAARwFMAWYAAAD1ABkAhAAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAEAAAOYAAeD/4P/gAeAAIAAAAAEAAAAAAAAAAAAAACAAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQAOAAAAAoACAACAAIAAQAg5gD//f//AAAAAAAg5gD//f//AAH/4xoEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAQAA3n170F8PPPUACwIAAAAAAM9nsUgAAAAAz2exSAAA/+ACAAHgAAAACAACAAAAAAAAAAEAAAHg/+AAAAIAAAAAAAIAAAEAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAQAAAAIAAAAAAFAAAAUAAAAAAA4ArgABAAAAAAABAA4AAAABAAAAAAACAA4ARwABAAAAAAADAA4AJAABAAAAAAAEAA4AVQABAAAAAAAFABYADgABAAAAAAAGAAcAMgABAAAAAAAKACgAYwADAAEECQABAA4AAAADAAEECQACAA4ARwADAAEECQADAA4AJAADAAEECQAEAA4AVQADAAEECQAFABYADgADAAEECQAGAA4AOQADAAEECQAKACgAYwBpAGMAbwBtAG8AbwBuAFYAZQByAHMAaQBvAG4AIAAxAC4AMABpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuAFIAZQBnAHUAbABhAHIAaQBjAG8AbQBvAG8AbgBHAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4AAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('woff');
	        font-weight: normal;
	        font-style: normal;
        }
        [class^="icon-"], [class*=" icon-"] {
	        font-family: 'close';
	        speak: none;
	        font-style: normal;
	        font-weight: normal;
	        font-variant: normal;
	        text-transform: none;
	        line-height: 1;

	        /* Better Font Rendering */
	        -webkit-font-smoothing: antialiased;
	        -moz-osx-font-smoothing: grayscale;
        }
        .icon-close:before {
	        content: "\e600";
	        font-size: 2em;
	        position:absolute;
	        top:10px;right:10px;
        }
        a > span.icon-close {color:white;}
    </style>
</head>
<body>

<div id="link1" class="panel">
    <a href="#home"><span class="icon-close"></span></a>
    <p>Page 1 Content</p>
</div>

<div id="link2" class="panel">
    <a href="#home"><span class="icon-close"></span></a>
    <p>Page 2 Content</p>
</div>

<div id="link3" class="panel">
    <a href="#home"><span class="icon-close"></span></a>
    <p>Page 3 Content</p>
</div>

<span id="menu">
    <a href="#link1">First Link</a><br/>
    <a href="#link2">Second Link</a><br/>
    <a href="#link3">Third Link</a>
</span>

</body>
</html>