Alter or generate and then remove a css3 keyframe

Question

I'm currently working on a project with sencha. In this project i have a rotating 'wheeloffortune' wheel that spins to a certain part of the wheel to get your bonus.

I did this before with some javascript where i created intervals to switch the css class of the div but that didn't work well.

I now want to do it with css3 animation for which i have the following css:

    @-webkit-keyframes rotater {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(3600deg);
    }
}

.css3-rotaterFull {
    -webkit-animation-name: rotater;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function:ease-out;
    -webkit-animation-duration: 15s;
}

But i need to spin it to a certain angle which is variable. therefor i need to be able to set the

to {
    -webkit-transform: rotate(3600deg);
}

part to a variable number of degrees before i add the class to the div

Any idea on how to do this ?

Answer 1

Use the CSSOM: http://dev.w3.org/csswg/cssom/

function rotate(deg) {
    var elem = document.getElementById('wheel');
    var lastStyleSheet = document.styleSheets[document.styleSheets.length - 1];
    var rule = '@-webkit-keyframes menuBreadcrumbAnimation {\
            0%  {\
                -webkit-transform: rotate(0deg);\
            } 100% {\
                -webkit-transform: rotate(' + deg + 'deg);\
            }';

    function rotateAnimationEnd() {
        lastStyleSheet.removeRule(lastStyleSheet.length);
        elem.removeEventListener('webkitAnimationEnd', rotateAnimationEnd,  false);
    };

    lastStyleSheet.insertRule(rule, lastStyleSheet.rules.length);
    elem.addEventListener('webkitAnimationEnd', rotateAnimationEnd, false);
    elem.classList.add('css3-rotaterFull');
};

Once you know what the end degree is, pass it to this function. It will grab the last stylesheet in your document, create a rule with the dynamic degree plugged in, and then inserts the rule into the stylesheet and adds the proper class to your element so it uses the animation.

The webkitAnimationEnd listener is there to remove the rule from the stylesheet once the animation finishes so the rules don't continuously build up and also removes the webkitAnimationEnd listener itself so it doesn't interfere with the next spin.

Answer 2

Put it in a style tag so as to be able to get/set it with getElementById('').innerHTML;.