Javascript code for CSS3 animation and transform property

Question

I know, with CSS, we have to use vendor prefixes such as -ms-, -moz-, -webkit- and -o- for transform property. And for animation property just -moz-, -webkit- and -o-. I want to know how to set each of them from Javascript? And transition property also.

Looking for something like this -

object.style.vendorTransform     // whole list
object.style.vendorAnimation     // whole list
object.style.vendorTransition    // whole list

Thanks in advance.

Note- I don't need any plugin, I need the pure Javascript code.

Answer 1

When I understand your question correctly you want to do the transform in JS, and not CSS (in that case I'd recommend SASS with the compass framework)

You could do it like this, so the right prefix is used:

var sty = ele.style, transform, transforms = ["webkitTransform", "MozTransform", "msTransform", "OTransform", "transform"];
for (var i in transforms) {
    if (transforms[i] in sty) {
        transform = transforms[i];
        break;
    }
}

and later on:

ele.style[transform] = "whatever transform you like to do";

So you do not have to set each of them, and of course you can reuse the "transform" variable for other elements, so the check only has to be done once.