Question

我正在读一本有关CSS动画的书。我发现了这句话：

每个列出的动画名称都应具有与之对应的值其他animation- *属性。如果动画中的值太多-* 属性，所有剩余值都将被忽略。如果没有足够的值，值列表将重复进行，直到出现足以匹配。

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

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;
}

动画名称属性中的“足够”和“太多”值是什么意思？

1 个答案: