Do I include vendor prefixes when animating with WAAPI animate()?

Question

Do I have to also include vendor prefixes for transform? Or is it handled automatically? If I have to include vendor prefixes for the animation how do I do it?

This is my current code:

document.querySelector('.ball').animate({
  transform: [`translate3d(0px, ${0}px, 0px)`, `translate3d(0px, ${500}px, 0px)`],
}, {
  duration: 2500,
  fill: 'forwards',
  easing: 'linear',
});

I'm not familiar with the WAAPI, however I can tell you that vendor prefixes are now almost entirely redundant for translation/animation CSS rules so I would be surprised if you ever need them. — Rory McCrossan, Oct 15 '22 at 18:54
As an aside, note that using a template literal for explicit integer values is pointless. — Rory McCrossan, Oct 15 '22 at 18:55
@RoryMcCrossan It was for readability but I get what you mean — Brian Hinkle, Oct 16 '22 at 05:01

score 1 · Accepted Answer · answered Oct 17 '22 at 00:00

1

There is no automatic handling of vendor prefixes in the spec (we were going to add it but the consensus at the time was that vendor prefixes should soon disappear). Most properties should not require a vendor prefix, and certainly not transform.

Generally, browsers recent enough to have implemented the Web Animations API should also be recent enough to support the unprefixed versions of the various animatable properties.

In fact, I'm not aware of any animatable properties that are only available in prefixed form (and none show up in the web platform tests database). If any do exist, you would use the regular IDL attribute form, e.g. webkitTransform, along with the unprefixed version. I would verify first, however, that it is actually needed.

answered Oct 17 '22 at 00:00

brianskold

809
5
10

Hi Brian, my use case is to animate using `mask-image` and `mask-position` which in chrome needs the `-webkit-` vendor prefix. using as `.animate([{webkitMaskPosition: "top"` has no effects. same with `{"-webkit-mask-position":` – mbehzad Oct 31 '22 at 16:58
1

You're right. That appears to be a Chrome bug. If you animate `-webkit-mask-position` using CSS animations it will generate an `Animation` where the keyframes animate the `webkitMaskPositionX` and `webkitMaskPositionY` properties but it doesn't seem to allow you to use those properties from JavaScript. I suppose the Chrome engineers originally assumed that property would be unprefixed soon. I think it's worth filing a Chrome bug for that. – brianskold Nov 02 '22 at 00:03

Do I include vendor prefixes when animating with WAAPI animate()?

1 Answers1

Linked