css - animation-name 属性中的 "enough"和 "too many"值是什么意思？

Question

我正在读一本关于 CSS 动画的书。我找到了这句话:

Every listed animation-name should have a corresponding value for any other animation-* properties. If there are too many values in an animation-* property, any leftover values are ignored. If there aren’t enough values, the list of values will be repeated until there are enough to match.

我想不通对应值过多或不足的故事是什么，也许有人有想法？任何提示都会很棒。

Answer 1

这是一个基本的例子:

.too-many {
  animation-name: one, two;
  animation-delay: 0s, 1s, 2s, 3s, 4s;
  /* the 2s, 3s and 4s will get ingored because they cannot be matched with any animation*/
}

.not-enough {
  animation-name: one, two, three, four, five, six, seven;
  animation-delay: 0s, 1s;
  /*it's like having
   animation-delay: 0s, 1s, 0s, 1s, 0s, 1s, 0s;
   we repeat until we cover all the animations
  */
}

所以基本上，如果我们的值少于animation-name，我们就会重复，直到我们得到相同的数字。如果我们有更多我们不考虑溢出

---

同样的逻辑适用于任何可以采用多个值的属性，例如 transition 和 background。

body {
  margin: 0;
  height: 100vh;
  background-image: 
     linear-gradient(red, red), 
     linear-gradient(blue, blue), 
     linear-gradient(red, red), 
     linear-gradient(blue, blue);
  background-size: 20px 20px, 50px 50px;
  background-repeat: no-repeat;
  background-position: top, bottom, left, right;
}

上面和这个是一样的:

body {
  margin: 0;
  height: 100vh;
  background-image: 
     linear-gradient(red, red), 
     linear-gradient(blue, blue), 
     linear-gradient(red, red), 
     linear-gradient(blue, blue);
  background-size: 20px 20px, 50px 50px,20px 20px, 50px 50px;
  background-repeat: no-repeat,no-repeat,no-repeat,no-repeat;
  background-position: top, bottom, left, right;
}

您可以继续添加更多，它们将被忽略:

body {
  margin: 0;
  height: 100vh;
  background-image: 
     linear-gradient(red, red), 
     linear-gradient(blue, blue), 
     linear-gradient(red, red), 
     linear-gradient(blue, blue);
  background-size: 20px 20px, 50px 50px,20px 20px, 50px 50px,54px 548px, 0 0, 100vh;
  background-repeat: no-repeat,no-repeat,no-repeat,no-repeat,repeat,repeat,no-repeat;
  background-position: top, bottom, left, right,0 0,center, bottom left;
}