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.

I just wanted to ask how to write code using vendor prefixes from javascript? I am confused about the letter case, like for transform and with moz prefix - object.style.MozTransform - is true OR object.style.mozTransform is true?? and similarly for webkit, ms and o prefixes.. — Rohit Kumar, Jun 05 '15 at 19:43
Note that jQuery from version 1.8 automatically determines the required vendor prefix. See this question: http://stackoverflow.com/questions/17487716/does-css-automatically-add-vendor-prefixes — Bram Vanroy, Jun 05 '15 at 19:44

score 2 · Accepted Answer · edited Apr 19 '21 at 20:24

2

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.

edited Apr 19 '21 at 20:24

Matthi

1,073
8
19

answered Jun 05 '15 at 19:37

frontend_dev

1,693
14
28

what I wanted was the list of all vendor prefixes with correct case to be used in JS. like I was confused whether set object.msTransform OR object.MsTransform.. that's it.. In your answer I found those.. Thanks. – Rohit Kumar Jun 08 '15 at 20:01
Third line of the code example has to be `if (transforms[i] in sty) {` — check against the value instead of the index. – Matthi Apr 19 '21 at 17:45

score 0 · Answer 2 · answered Jun 05 '15 at 19:27

0

Less is a pretty neat JavaScript tool you can use to do this.

answered Jun 05 '15 at 19:27

aredzko

1,690
14
14

I've no experience with Less, Sass, compass, etc. Neither I have read much about them. I'm just a beginner. – Rohit Kumar Jun 05 '15 at 19:31

score 0 · Answer 3 · answered Oct 02 '18 at 06:50

0

Try something like this:

// es6
function animate(element, transformValue = 'none', transitionValue = 'none') {
  const prefixes = ['webkit', 'moz', 'ms', 'o', '']

  if (element) {
    for (let value of prefixes) {    
      element.style[value + 'Transform'] = transformValue
      element.style[value + 'Transition'] = transitionValue
    }
  }
}

const el = document.getElementById('someId')
animate(el, 'translate3d(200px, 0, 0)', 'transform 400ms ease-out')

answered Oct 02 '18 at 06:50

haravares

502
1
6
12

Made me smile, but all the browsers that do support ES6 syntax and e.g for..of.. loops, do support these CSS properties without vendor prefix ;-) – Kaiido Oct 02 '18 at 07:11
@Kaiido, what about babel and old browsers supporting? – haravares Oct 03 '18 at 08:13

Javascript code for CSS3 animation and transform property

3 Answers3