1.js

/**
 * @param {HTMLElement} element
 * @param {Keyframe[] | PropertyIndexedKeyframes} to
 * @param {KeyframeAnimationOptions} options
 */
export function animateTo(element, to, options) {
  const anim = element.animate(
    to,
    { ...options, fill: 'both' },
  );
  anim.addEventListener('finish', () => {
    anim.commitStyles();
    anim.cancel();
  });
  return anim;
}

/**
 * @param {HTMLElement} element
 * @param {PropertyIndexedKeyframes} from
 * @param {KeyframeAnimationOptions} options
 */
export function animateFrom(element, from, options) {
  return element.animate(
    { ...from, offset: 0 },
    { ...options, fill: 'backwards' },
  );
}

@stefanfrede caniuse is out of date. This code works in all modern browsers.

@jakearchibald
Maybe a PR on https://github.com/mdn/browser-compat-data if you happen to know the versions of the browsers it was added?

@jakearchibald Teeny tiny doc/property mismatch:

* @param {Keyframe[] | PropertyIndexedKeyframes} to
should be
* @param {Keyframe[] | PropertyIndexedKeyframes} keyframes

@JodiWarren updated, cheers!

anim.commitStyles() throws an Error while animating pseudo elements:

Uncaught DOMException: Failed to execute 'commitStyles' on 'Animation': Animation not associated with a styled taemptyement

Possible solution: call commitStyles() only if the user is not animating a pseudo-element with:
if(!( 'pseudoElement' in options && options['pseudoElement'] )) anim.commitStyles();

This prevents an Error from throwing, but might give users a false sense of security that the pseudo-element will retain the styles after the animation finishes. May be a side note in the JSDoc?

Yeah, pseudo-elements currently cannot have inline styles. I hope that changes some day, and it's been discussed. But got now, it's better to use animateFrom on pseudos.

I see, thanks!