相关疑难解决方法(0)

有没有办法将该nth-child值用作SASS变量？

使用示例:

div:nth-child(n) {
    content: '#{$n}'
}

div:nth-child(n) {
    background: rgb(#{$n}, #{$n}, #{$n});
}

我试图在完整的css3动画中按顺序动画元素.似乎非常直截了当的答案是使用动画延迟.但是我想循环,任何想法如何让动画无限循环？

我在类似的问题上找到了这个小提琴.基本上这是相同的逻辑,但我只是想它循环.

这是类似的[问题](/sf/answers/580614401/)

使用这个:

@-webkit-keyframes FadeIn { 
0% { opacity:0; -webkit-transform:scale(.1);}
85% {opacity:1; -webkit-transform:scale(1.05);}
100% {-webkit-transform:scale(1); }
}

.myClass img { float: left; margin: 20px; 
    -webkit-animation: FadeIn 1s linear; -webkit-animation-fill-mode:both; }
.myClass img:nth-child(1){ -webkit-animation-delay: .5s }
.myClass img:nth-child(2){ -webkit-animation-delay: 1s }
.myClass img:nth-child(3){ -webkit-animation-delay: 1.5s }
.myClass img:nth-child(4){ -webkit-animation-delay: 2s }

编辑

为了清楚起见,我想以顺序的方式想要动画,比如在第一个动画之后,动画第二个项目,然后是第三个......依此类推.我正在考虑制作大约10到12个元素的动画.所以他们会一个接一个地制作动画.

所以@Sonu Joshi的回答是不正确的.

有没有办法(没有javascript)让nth-child影响CSS？

例如,当我加载了10个图像时,我会淡化不透明度,并为每个图像赋予N秒的动画延迟.

我可以使用nth-child(1){},nth-child(2){}等手动完成此操作,但这显然是混乱的,并且具有有限数量的元素.

我也尝试过循环,虽然效果很好(10n + 1),如果我试图偏离a + b公式(100n + 10n),它会中断.此外,我怀疑每10n加1秒,每10n加1秒,因为其中一个会覆盖另一个.

这个问题类似于2011年的问题,这个问题仍然存在,但很多时间过去了,这些天可能会有更好的答案.

我希望我的按钮按时间顺序排列 - 第二个按钮在第一个按钮结束后开始动画，依此类推...有人可以帮助我实现这种效果吗？

a {
      padding: 6px;
    display: block;
    width: 50px;
    font-size: 17px;
    margin: 10px auto;
    border: 2px solid;
    text-decoration: none;
    box-shadow: 0 0 0 rgba(204,169,44, 0.4);
    animation: pulse 2s infinite;
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
    box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
  }
  70% {
      -moz-box-shadow: 0 0 0 10px rgba(255,208,0, 0.2);
      box-shadow: 00 0 0 10px rgba(255,208,0, 0.2);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
      box-shadow: 0 …