Currently there is no way to scope keyframe names declared in styles in user-agent origin vs author rules. For example, consider the following declaration in a user agent stylesheet, used here

@keyframes page-transition-fade-in {
  from { opacity: 0; }
}

::page-transition-incoming-image {
    animation: page-transition-fade-in 0.25s both;
  }
}

This has 2 problems:

• If the author declares a keyframe with the same name for a different animation, it will incorrectly override the keyframe selected for the rule in the user-agent stylesheet.
• If the keyframe with the same supplied by the author is missing, the declaration in the user-agent stylesheet will be used incorrectly.

We need a way to scope keyframe names between styles in the user-agent origin vs author styles. A couple of options are:

• Come up with a prefix which is reserved for UA rules. It will be an error for author keyframes to use this prefix. This will have compat issues to figure out the right prefix.

• Keep a separate list of keyframes declared in user-agent stylesheets vs author stylesheets. The list chosen when selecting the animation-name depends on where the resolved animation-name came from. This means if the animation-name was specified in a UA stylesheet but overridden by an author style (possibly with the same name), the look up is in author keyframe names.

  One of the caveats with this is script APIs like AnimationEvent include animation-name and which keyframe it corresponds to would be ambiguous. We could add another field to such APIs (bool isUASource) specifying the namespace for the rule.

@flackr @vmpstr @jakearchibald