Trigger same CSS animation on every click
<p>I'm trying to trigger a CSS animation onclick, but have it restart after each click. I know I can toggle the animation on and off, but I'd like to just trigger the animation every time the button is clicked. Also, initially the CSS animation should not run. Only run when clicked.</p>

<p>Here's my pen.
<a href="http://codepen.io/omarel/pen/JRwpZp" rel="noreferrer">http://codepen.io/omarel/pen/JRwpZp</a></p>

<p><strong>HTML :</strong></p>

<pre><code>&lt;a href="#" class="addtocart"&gt;click me&lt;/a&gt;
</code></pre>

<p><strong>Jquery :</strong></p>

<pre><code> $('.addtocart').click(function () {  
     $(this).addClass('on');
 }); 
</code></pre>

<p><strong>CSS :</strong></p>

<pre><code>.addtocart {
    position: relative;
}

    .addtocart.on {
        -webkit-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
        -moz-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
        -ms-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
        -o-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
        animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
    }

@keyframes cartbtnFade {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }

    10% {
        transform: translateY(-100%);
    }

    15% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(-50%);
    }

    40% {
        transform: translateY(0%);
    }

    100% {
        opacity: 1;
    }
}
</code></pre>