How does CSS decide implicit animation keyframes?

58 Views Asked by At

When an animation is triggered via the javascript API, it requires a list of keyframes. This example is from Vuetify.

const animation = animate(el, [{
  transform: `translate(${x}px, ${y}px) scale(${sx}, ${sy})`,
  opacity: 0
}, {
  transform: '',
}], {
  duration: 225 * speed,
  easing: deceleratedEasing
});

These keyframes are implicit, as they do not both include opacity, nor both transform.

On older browswers (i.e., Chrome 69.0), this is a problem, and one needs to be explicit about animation keyframes. Thus, it throws an exception for the above code. However, it works if changed to

const animation = animate(el, [{
  transform: `translate(${x}px, ${y}px) scale(${sx}, ${sy})`,
  opacity: 0
}, {
  transform: `translate(${x}px, ${y}px) scale(${sx}, ${sy})`,
  opacity: 1
}], {
  duration: 225 * speed,
  easing: deceleratedEasing
});

How does modern CSS decide the values for the implicit keyframes, and how can I find out that information for a generic keyframe with opacity, transform, and offset?

From this page, "Implicit to/from keyframes are supported from Chrome v84".

I tried entering values myself, but I have no idea what the implicit/default keyframes/opacities should be.

0

There are 0 best solutions below