Modify or generate and then delete css3 keyframe

Question

I am currently working on a project with sencha. In this project, I have a spinning wheel wheeloffortune that spins towards a specific part of the wheel to get your bonus.

I did this before using some javascript, where I created the intervals for switching the css class to div, but that didn't work.

Now I want to do this using 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 unscrew it to a certain angle, which is variable. so i need to install

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

with a variable number of degrees before adding a class to a div

Any idea on how to do this?

Answer 1

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');
};

, , . , , , .

webkitAnimationEnd , , webkitAnimationEnd, .

Answer 2

, / getElementById('').innerHTML;.