Reset CSS Animations

HTML

<div id="clicker" class="button">
    Click me
</div>
<div id="target" class="dot">asdsddasd asdsad asdaddaaad</div>

CSS

#target {
    position: relative;
}
.animate {
animation: my-animation 4s steps(60, end); 
}
@-webkit-keyframes down {
      0% { top: 0px; }
     50% { top: 40px; }
    100% { top: 0px; }
}
@-moz-keyframes down {
      0% { top: 0px; }
     50% { top: 40px; }
    100% { top: 0px; }
}

.button {
    background-color: #ccc;
    border-radius: 10px;
    padding: 10px;
    margin: 10px;
    display: inline-block;
    font-family: sans-serif;
}
.button:hover {
    background-color: #eee;
}
.dot {
    display: inline-block;
    background-color: red;
    width: 20px;
    height: 20px;
    border-radius: 10px;
}
.button, .dot {
    vertical-align: middle;
}

JavaScript

$('#clicker').click(function(){
    $target = $('#target');
    $target.removeClass('animate');
    setTimeout("$target.addClass('animate');",100)
});