@supports规则如何在此语句中支持动画名称？

Question

我在W3C的页面上找到了此CSS，但我不知道它有什么意义，特别是动画名称部分：

@supports ((transition-property: color) or
           (animation-name: foo)) and
          (transform: rotate(10deg)) {
  // ...
}

我了解这支持规则：

@supports (display: grid) {
  .main {
    display: grid;
  }
}

这表示：如果浏览器支持“网格”显示类型，则应用此规则。但是我不明白的是第一个例子是animation-name: foo。

对我来说，这是指：如果浏览器支持名称为“ foo”的动画，请应用此规则。我以为[[you（开发人员）定义了动画。这只是一个不好的例子吗？

这里是animation-name上的文档。定义关键帧时，可以定义动画名称。只是说：“当有人定义了名称为foo的关键帧规则时启用此查询”吗？那不是意味着是否支持名为“ foo”的动画，而是是否存在名为“ foo”的动画。

https://www.w3.org/TR/css3-conditional/#processing

Answer 1

[这意味着如果浏览器支持名称为“ foo”的动画，请应用此规则。我以为您是开发人员定义的动画。这只是一个不好的例子吗？

不完全是那样。 display和animation-name之间的区别在于，第一个采用一组预定义值中的一个值，而第二个采用任何有效字符串。

在the specification中，您可以找到display允许的值的详尽列表。您必须使用一个逻辑上有效的值，并且对不同值的支持也不相同。

[animation-name取一个名为<keyframes-name>的值，从the specification中得到：

<keyframes-name> = <custom-ident> | <string>

和
某些属性接受任意作者定义的标识符作为组件值。此通用数据类型用<custom-ident>表示，并表示不会在... 
[ref
中被误解为预定义关键字的任何有效CSS标识符。字符串由双引号或单引号定界的字符序列组成。 
ref
该属性可以接受无数个值，并且您必须使用有效的值，因此任何字符串都可以完成此工作（例如foo）。由于不支持基于使用的值，因此所有这些值都会有一个相等的支持，这就是为什么可以使用随机字符串来测试animation-name的支持的原因。
所有逻辑都是相同的。您必须使用一个有效值，然后我们才能测试该值的支持。对于display，您只能使用某些值，并且每个值都有不同的支持。对于animation-name，您对该值没有限制，并且它们都具有相同的支持。
[尝试为animation-name使用无效的值，它将无效：
 
@supports (animation-name: a b ) {
  body {
    background:red;
  }
}
与使用无效值进行显示一样：
 
@supports (display: 0 ) {
  body {
    background:red;
  }
}
相同的逻辑适用于可以将transition-property作为值的<custom-indent>。
对animation-name使用有效值，它将适用：
 
@keyframe myanimation {
  0% {
	opacity: 0;
  }
  100% {
	opacity: 1;
  }
}

@supports (animation-name: myanimation) {
  body {
    background:green;
  }
}

@supports (animation-name: foo ) {
  body {
    background:red;
  }
}