Rotating image 2 times

Question

There are a few questions about how to rotate an image, but I want the animation to rotate. With help

event (tap) I would like to rotate the image with -5 degrees, then with 5 degrees, but if I write both rotating in

the same function (or event handler), the first rotation is not displayed, only the second is visible.

$("#imgdiv").on('taphold', function(e){
    //$("#imageID").addClass("swing animated");
    $("#imageID").css({"transition-property":"transform","transition-duration":"2s","transform":"rotate(-5deg)"});
    $("#imageID").css({"transition-property":"transform","transition-duration":"2s","transform":"rotate(5deg)"});
    //$("#imageID").removeClass("swing animated");
});

I also tried swing animation with classes (addClass, then removeClass), but with the same result:

@keyframes swing { 
    25% { transform: rotate(-5deg); } 
    50% { transform: rotate(0deg); } 
    75% { transform: rotate(5deg); } 
    100% { transform: rotate(0deg); } 
} 

.swing { 
    transform-origin: top center; 
    animation-name: swing;
}

.animated { 
    animation-duration: 1s;  
    animation-fill-mode: both; 
    animation-timing-function: linear; 
}

Answer 1

addclass removeeclass, . addclass removeeclass. setTimeout:

$("#imgdiv").on('click', function(e){
    $("#imageID").addClass("swing animated");
    setTimeout(function(){
        $("#imageID").removeClass("swing animated");
    },1000)
});

jsfiddle - http://jsfiddle.net/tqn394k9/

Answer 2

setTimeout, , .

css, JS. JS.

- SAMPLE.

JS:

$(".clickme").click(function(){
  //animate to -5deg
    $(this).css('transform','rotate(-5deg)');
  //animate to 5deg
    setTimeout(function(){$(".clickme").css('transform','rotate(5deg)')},1000);
  //animate back to root position
 setTimeout(function(){$(".clickme").css('transform','rotate(0deg)')},2000);
});