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
– Rohit Kumar, Commented Jun 5, 2015 at 19:43
Note that jQuery from version 1.8 automatically determines the required vendor prefix. See this question: stackoverflow.com/questions/17487716/… — Bram Vanroy
– Bram Vanroy, Commented Jun 5, 2015 at 19:44

Matthi · Accepted Answer · 2021-04-19 20:24:00Z

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, 2021 at 20:24

Matthi

1,0738 silver badges19 bronze badges

answered Jun 5, 2015 at 19:37

frontend_dev

1,73914 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rohit Kumar Over a year ago

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.

Matthi Over a year ago

Third line of the code example has to be if (transforms[i] in sty) { — check against the value instead of the index.

aredzko · Accepted Answer · 2015-06-05 19:27:53Z

0

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

answered Jun 5, 2015 at 19:27

aredzko

1,76015 silver badges15 bronze badges

1 Comment

Rohit Kumar Over a year ago

I've no experience with Less, Sass, compass, etc. Neither I have read much about them. I'm just a beginner.

haravares · Accepted Answer · 2018-10-02 06:50:36Z

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 2, 2018 at 6:50

haravares

5521 gold badge6 silver badges13 bronze badges

2 Comments

Kaiido Over a year ago

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

haravares Over a year ago

@Kaiido, what about babel and old browsers supporting?

Collectives™ on Stack Overflow

Javascript code for CSS3 animation and transform property

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related