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

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

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

Solution

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.