I have a short css-based animation that I want to play out before a link is followed (a card that swooped in on page load swoops out after click). Currently, however, the page called loads too quickly. I want to be able to briefly delay the href from being followed.

Here's what I've got:

$(document).ready(function() {
    $("#card").css("top","0px");
$(".clickit").click(function() {
    $("#card").css("top","-500");
});
});

The first line swoops the card in on page load. After that is the click call that modifies the CSS, but like I said there needs to be some kind of delay in there because the page loads immediately, instead of after the animation. The CSS that is modified looks like this:

#card {
  width: 400px;
  height: 500px;
  position: relative;
  top: -500px;
  -webkit-transition:all .5s;
}

(yes, I know this is webkit-only right now)

This is a problem very similar to this question from 2008, but I know jQuery has been updated significantly since then, so I wanted to see if there was a more modern solution.

Thank you!