[css-animations-2][web-animations-2] API For specifying phase linked offsets in keyframes

[flackr]

In #7044 we resolved to add phase linked offsets to the animations APIs. We discussed a simple CSS syntax such as the following:

@keyframes fade-in-out-animation {
  enter 0% { opacity: 0; }
  enter 100% { opacity: 1; }
  exit 0% { opacity: 1; }
  exit 100% { opacity: 0; }
}

We didn't talk about a syntax for the web-animations API, however #7589 touches on an API for the similar delay and endDelay properties so we should probably do the same here. Concretely this means whichever format we choose for #7589 (i.e. String or Object), that could be specified for offset in the Keyframe dictionary and should likely be returned by getKeyframes.

[css-meeting-bot]

The CSS Working Group just discussed API for phase-linked offsets in keyframes, and agreed to the following:

• RESOLVED: Use same object as in 7589 to specify keyframe offsets as well

The full IRC log of that discussion

<TabAtkins> Topic: API for phase-linked offsets in keyframes
<TabAtkins> github: https://github.com//issues/7637
<TabAtkins> flackr: Related to previous, we also resolved in CSS that you could link keyframes to timeline phases
<TabAtkins> flackr: But again we didn't have a JS way to do it
<TabAtkins> flackr: So the issue suggests that we reuse the previous resolution's format for specifying keyframe offsets
<TabAtkins> +1
<TabAtkins> flackr: So represetning a keyframe position as phase+offset
<TabAtkins> Rossen_: objections?
<bramus> +1
<Sebo> +1
<TabAtkins> flackr: Summarized: support passing a phase+offset object in the keyframe offsets
<TabAtkins> RESOLVED: Use same object as in 7589 to specify keyframe offsets as well