按顺序设置动画项目

Question

像进度条一样：

span {
  display: inline-block;
  width: 20%;
  text-align: center;
  outline: 1px solid black;
  font-weight: bold;
}

span:nth-child(1) {
  animation: bar 1s linear;
}

@keyframes bar {
  0% {
    color: black;
    background: white;
  }
  100% {
    color: white;
    background: black;
  }
}

<p><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></p>

我希望下一个<span>闪烁一秒钟，然后是第三个，依此类推。是否可以使用CSS？

Answer 1

使用以下CSS：

＆＃13;

＆＃13;

span {
  display: inline-block;
  width: 20%;
  text-align: center;
  outline: 1px solid black;
  font-weight: bold;
  color: black;
  background: white;
}
span:nth-child(1){
    animation: bar 1s linear 0s forwards;
}
span:nth-child(2){
    animation: bar 1s linear 1s forwards;
}
span:nth-child(3){
    animation: bar 1s linear 2s forwards;
}
span:nth-child(4){
    animation: bar 1s linear 3s forwards;
}
span:nth-child(5){
    animation: bar 1s linear 4s forwards;
}

@keyframes bar {
  0% {
    color: black;
    background: white;
  }
  100% {
    color: white;
    background: black;
  }
}

＆＃13;

<p><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></p>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用CSS，您可以声明静态代码，因此如果您确切知道将使用多少跨度，则没有问题。如果你想要一些递归的东西（首先是下一个，直到有跨度），你只能用JS做到这一点。 请注意，在这个例子中，我确切地知道了p有多少个孩子。

span {
  display: inline-block;
  width: 20%;
  text-align: center;
  outline: 1px solid black;
  font-weight: bold;
  color: black;
  background: white;
  animation: bar 5s linear infinite;
}

span:nth-child(2) {
  animation-delay: 1s;
}

span:nth-child(3) {
  animation-delay: 2s;
}

span:nth-child(4) {
  animation-delay: 3s;
}

span:nth-child(5) {
  animation-delay: 4s;
}

@keyframes bar {
  0% {
    color: black;
    background: white;
  }
  10% {
    color: white;
    background: black;
  }
  11% {
    color: black;
    background: white;
  }
  100% {
    color: black;
    background: white;
  }
}

<p><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></p>