Как индикатор выполнения:

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?

0
Mori 28 Май 2017 в 10:47

2 ответа

Лучший ответ

Используйте следующий CSS:

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;
  }
}
<p><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></p>
1
Gerard 28 Май 2017 в 08:07

С помощью CSS вы можете просто объявить статический код, поэтому, если вы точно знаете, сколько диапазонов будет использовано, проблем не возникает. Если вы хотите что-то рекурсивное (сначала, потом следующее, пока не появятся промежутки), вы можете сделать это только с JS. Обратите внимание, что в этом примере я точно знаю, сколько детей имеет р.

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>
1
nicokant 28 Май 2017 в 08:13