Div fixed in Javascript animation

Question

I have a contact form which has a little animation, the idea is that once the user has clicked the send button, the form will shoot up in the air, a thank you message will then appear - hold for a second or two, fade away and then the form will drop back down to its original position. My problem is that when the form is shooting up in the air it is taking its container and the thank you message, which isn't supposed to appear for a few seconds, with it. This is clearly a css problem and nothing to do with the js. I think the most important of the code is below

<div id="contact">
<div id="contact-wrap">

<div class="contact-form">
<form class="contact" method="post" action="">
<input type="text" class="contact_name" name="contact_name" value="Name" placeholder="Name">    </input>
<input type="text" class="contact_email" name="contact_email" value="Email" placeholder="Email"></input>
<input type="text" class="contact_subject" name="contact_subject" value="Subject"     placeholder="Subject"></input>
<input type="text" class="contact_message" name="contact_message" value="Write your message here .." placeholder="Write your message here .."></input>
<input class="button" type="button" value="Send It" name="submit"></input>
</form><!-- contact -->
</div><!-- contact-form -->

</div><!-- contact-wrap -->

<div id="thanks">
<p>Message Received, Thanks!</p>
<div class="tick"></div>    
</div>

</div><!-- contact -->



#contact {  
    width:100%;
    overflow:hidden;
    background:#980000;
}
#contact-wrap {
    width:55%; min-width:100px; background:#980000;
    margin:0 auto; overflow:hidden; text-align:center;
}
.contact-form { 
    background:#fff; 
    width:57%; height:100%; margin:0 auto; :z-index:999999999999;
}
.contact { 
    background:#fff;    
}
#thanks {  
    background:green; bottom:0;
}

I would really appreciate any help, thanks a lot :)