JSFiddle - React, Tailwind, and code Playground

HTML

<img class='rotate' width='250' src='http://wallpapersfor.me/wp-content/uploads/2012/02/cute_cat_praying-1280x800.jpg' />
<input type='checkbox' checked='true' id='faster' />

CSS

img.rotate {
    -webkit-animation:rotate 1.5s linear infinite;
}
@-webkit-keyframes rotate {
  0%   { -webkit-transform: rotate(  0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

JavaScript

var pfx = ["webkit", "moz", "MS", "o", ""], // Allow browser prefixes to work for PrefixedEvent
    rotates = $('.rotate'), // Obtain all rotates
    prevent = false; // Prevent new element from being created each iteration

function PrefixedEvent(element, type, callback) { // Allow one JS listener based on browser
	for (var p = 0; p < pfx.length; p++) {
		if (!pfx[p]) type = type.toLowerCase();
		element.addEventListener(pfx[p]+type, callback, false);
	}
}

function listen() { // Listen for animationIterations. Named because it needs to applied to cloned elements
    for(var i = 0, j = rotates.length; i < j; i ++) { // Add listener to each `rotate`
        PrefixedEvent(rotates[i], "AnimationIteration", function() { // Apply the listener based on browser
            if(!$('#faster').is(':checked') && !prevent) { // This happens if box is not checked
                var el = $(this),  
                   newOne = el.clone(true).css({'animation':'rotate 2s linear infinite'}); // Make a clone of the element so the animation can be restarted. See http://css-tricks.com/restart-css-animation/ for full info        
                el.before(newOne);        
                $("." + el.attr("class") + ":last").remove(); // Remove old element
                rotates = $('.rotate'); // Update list of `rotate`s
                listen(); // Apply listeners again
                prevent = true; // Prevent this if from happening directly after
            }
            else if($('#faster').is(':checked') && prevent) { // This happens if the box is checked
                prevent = false; // Prevent this if from happening directly after
                var el = $(this),
                   newOne = el.clone(true).css({'animation':'rotate 1.5s linear infinite'}); // Make a clone of the element so the animation can be restarted. See http://css-tricks.com/restart-css-animation/ for full info   
                el.before(newOne);
                $("." + el.attr("class") +...