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

I would recommend doing { fill: 'both', ...options }, that way if someone wants to override your 'both' to only be 'forward' for a single instance or a new argument is added in the future disco maybe, it should be easy to override on a single call

this is the point, he did this in this way because the fix don't work without the fill as both and then there is no reason to use it.

I would recommend doing { fill: 'both', ...options }, that way if someone wants to override your 'both' to only be 'forward' for a single instance or a new argument is added in the future disco maybe, it should be easy to override on a single call

this is the point, he did this in this way because the fix don't work without the fill as both and then there is no reason to use it.

It works with forward. What if I want forward and not both. What if I pass in delay, but I don't, for whatever reason, want it to fill both?
What if future feature of 'disco' works just like 'both', but with extra cool feature.
If someone passes in nothing, 'both' would still be given. If someone passes in 'forward', the feature would still work and act exactly the way the person wants.
If someone passes in 'backwards', well, that is their own damn fault for breaking it.

Hmm, after having a look at Can I use... it seems Chrome and Edge are not supporting commitStyles(): https://caniuse.com/?search=commitStyles

How to use this code on a website to add transition animations ?

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

@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!