I am trying to pop up a <div> tag with a fade in effect using the CSS transition method and it's not working...not sure why?
Below is all my code.

Code:
#call {
    top: 0;
    left: 0;
    display: none;
    width: 22%;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    vertical-align: middle;
}
#callUsPopUp {
    width: 300px;
    height: 100px;
    margin-top: -325px;
    margin-bottom:  auto;
    padding-top: 1px;
    position: relative;
    border-radius: 10px;
    -webkit-animation: fadein 2s;  Safari, Chrome and Opera > 12.1 
    -moz-animation: fadein 2s;  Firefox < 16 
    -ms-animation: fadein 2s;  Internet Explorer 
    -o-animation: fadein 2s;  Opera < 12.1 
     animation: fadein 5s;     
    background-color: #366181;
}
#callUsPopUp h2 {
    color: #ffe;
    margin-left: auto;
    margin-right: auto;
}
#close {
    margin: 0;
    padding: 0;
    height: 20px;
    width: 70px;
    font-family: arial;    
    padding-top: 3px;
    text-align: center;
    border-radius: 7px;
    margin-top: -10px;
    margin-left: auto;
    margin-right: auto;
    background-color: #c7c5c5;
}


<section>
     <div id="call">
         <div id="callUsPopUp">
             <h2>Call us: (406) 214-1104</h2>
             <a href="#" onclick="document.getElementById('call').style.display = 'none';"><div id="close">Close</div> 
             </a>
         </div>
     </div>
 </section>
   

function showCallUs() {
     document.getElementById("call").style.display = "block";
}