Here’s the best approach to go about it.

Create an active animation class.

#className.active {
    -webkit-animation-name: cycle;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    animation-name: cycle;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    -moz-animation-name: cycle;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: 1;
    -moz-animation-fill-mode: forwards;
}

Use JQuery, and remove the active class every time the animation ends.

$(document).ready(function() {
    $(".activate").click(function() {
        $('#className').addClass('active');
        $('#className').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){
        $(this).removeClass('active');
        });

    });
});