Turns out it was a refresh issue
// search the CSSOM for a specific -webkit-keyframe rule
function findKeyframesRule(rule) {
// gather all stylesheets into an array
var ss = document.styleSheets;
// loop through the stylesheets
for (var i = 0; i < ss.length; ++i) {
// loop through all the rules
for (var j = 0; j < ss[i].cssRules.length; ++j) {
// find the -webkit-keyframe rule whose name matches our passed over parameter and return that rule
if ((ss[i].cssRules[j].type == window.CSSRule.KEYFRAMES_RULE) && ss[i].cssRules[j].name == rule) return [ss[i], ss[i].cssRules[j]];
}
}
// rule not found
return null;
}
// remove old keyframes and add new ones
function change(anim) {
// find our -webkit-keyframe rule
var results = findKeyframesRule(anim);
var style_sheet = results[0];
var rule = results[1];
console.log(rule)
// remove the existing 0% and 100% rules
rule.deleteRule("0%");
rule.deleteRule("100%");
rule.appendRule("0% { transform: rotate(0deg);}")
rule.appendRule("100% { transform: rotate(" + randomFromTo(-360, 360) + "deg); }")
// create new 0% and 100% rules with random numbers
var box = document.getElementById('box');
// assign the animation to our element (which will cause the animation to run)
box.style.animationName = 'none';
box.offsetWidth = box.offsetWidth;
box.style.animationName = anim;
}
// begin the new animation process
function startChange() {
change("rotate");
}
// get a random number integer between two low/high extremes
function randomFromTo(from, to) {
return Math.floor(Math.random() * (to - from + 1) + from);
}
$(function () {
$('#update-box').bind('click', click_handler);
});
function click_handler(e) {
e.preventDefault();
startChange();
}
Is the updated working code.
http://jsfiddle.net/RHhBz/675/
The following being the important change
box.style.animationName = 'none';
box.offsetWidth = box.offsetWidth; //This line here is needed to force refresh
box.style.animationName = anim;