代码之家 › 专栏 › 技术社区 › Webwoman

“足够”和“太多”值在动画名称属性中意味着什么?

css-animations css3 css

Webwoman · 技术社区 · 6 年前

我在读一本关于CSS动画的书。我发现这句话:

每个列出的动画名称都应该有一个对应的值其他动画-*属性。如果动画中的值太多-* 属性,忽略所有剩余值。如果没有如果值足够多,则将重复值列表,直到足够匹配。

我不知道什么是故事太多或没有足够的对应价值,也许有人有想法?任何暗示都是很好的。

1 回复 | 直到 6 年前

Temani Afif 6 年前

下面是一个基本示例:

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

推荐文章

lineage · docker中五彩纸屑的代码是什么/欢迎来到docker?[关闭]

7 月前

mini1012 · 关键帧css中百分比之间的延迟

7 月前

Fernandossmm · element.animate()使用关键帧似乎忽略了放松功能

1 年前

goalTosin · 当一个项目被删除时,我如何设置侧边栏项目向上滑动的动画?

1 年前

Dan · 如何设置重置变换的动画:使用CSS关键帧旋转?

1 年前

Dan · 如何使用Tailwind创建动画序列?

1 年前

Thomas Pötz · CSS伪元素的翻译速度快于主元素

1 年前

Morteza M · 在连续旋转中更改CSS动画持续时间

1 年前

Chris Dk · 为什么我的html元素在动画后会消失

1 年前

dododdo · 看到对象后在css中的动画

1 年前