html - javascript and css popup fade out annimation -

i making popup message when set style.display = "block"; (by pressing button), fade invisible. have button on popup hides popup setting style.display = "none"; how can make fade out?

here css

#note {     position: absolute;     z-index: 101;     top: 0;     left: 0;     right: 0;     background: #fde073;     text-align: center;     line-height: 2.5;     overflow: hidden;      -webkit-box-shadow: 0 0 5px black;     -moz-box-shadow:    0 0 5px black;     box-shadow:         0 0 5px black; } @-webkit-keyframes slidedown {     0%, 100% { -webkit-transform: translatey(-50px); }     10%, 90% { -webkit-transform: translatey(0px); } } @-moz-keyframes slidedown {     0%, 100% { -moz-transform: translatey(-50px); }     10%, 90% { -moz-transform: translatey(0px); } } .cssanimations.csstransforms #note {     -webkit-transform: translatey(-50px);     -webkit-animation: slidedown 2.5s 1.0s 1 ease forwards;     -moz-transform:    translatey(-50px);     -moz-animation:    slidedown 2.5s 1.0s 1 ease forwards; } .cssanimations.csstransforms #close {     display: none; } 

here javascript

<script>     close = document.getelementbyid("close");     close.addeventlistener('click', function() {         note = document.getelementbyid("note");         note.style.display = 'none';     }, false); </script> 

and here html

<div id="note" style="display: none;">     form has been sent. if fill out suggestion, feel free remember there anti-spam system running. <a id="close">[close]</a> </div> 

use jquery, cause simpler, download here click here. include jquery.js & write code in <script> tags.

to show popup use,

$("#btn_id").click(function(e){     $('#note').fadein(); }); 

to hide popup use,

$("#close").click(function(e){     $('#note').fadeout(); });