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.