Reset transform: rotate() without invoking -webkit-transition: style

Question

I am drawing a wheel on a canvas, rotating it and then wanting to reset the rotation to 0. however due to the css property: -webkit-transition: -webkit-transform 15s ease;

Answer 1

I think I have a solution for this. By changing the css class to a 'default rotation' class briefly before changing the class to your animated rotation class you can control the animation timing on each separate class in order to have the wheel snap back to the starting position before rotating to your new position.

css:

.spin0 {
    transform: rotate(0deg);    
}

.spin750 {
    transform: rotate(750deg) !important;
    transition-duration: 2.5s !important;
}

js (on click):

element.className = "spin0";

setTimeout(function(){
    element.className = "spin750";
}, 10);