[css-animations] How should relative-length values be interpreted when used in the <keyframe-selector> production in the @keyframes prelude?

[weinig]

Assuming calc() is allowed here (see #10879), how should relative-length values be interpreted when used with in it?

The <keyframe-selector> production in the @keyframes prelude is defined via the grammar:

<keyframe-selector> = from | to | <percentage [0,100]>

So, for example, you could have:

@keyframes foo {
  from {
    margin-left: 0px;  
  }
  calc(50% * sign(10em - 2px)) {
    margin-left: 100px;
  }
  from {
    margin-left: 200px;  
  }
}

So the question is, what does 10em evaluate to? @font-palette-values contains this text:

Math functions, such as calc(), and also var(), and env(), are valid within descriptor values in a @font-palette-values rule. They are evaluated within the context of the root element. Relative units are also evaluated within the context of the root element.

but I can't find any similar text for @Keyframes.

[fantasai]

For keyframes I suspect the ideal behavior would be to reference the element the animation is specified on, if that's possible. CC @flackr @bramus who probably have a good sense of what we should do here.

[tabatkins]

That's how we resolve var() in keyframes already, so yes, that's definitely the behavior we want.