Как играть в CSS с задержкой на каждой итерации? - PullRequest
Новая
       8

Как играть в CSS с задержкой на каждой итерации?

0 голосов
/ 24 сентября 2018

У меня есть пара анимаций (баров), которые я хочу отложить, чтобы переключаться между ними.Первый 1, когда он заканчивает другой и так далее ... но я смог только задержать первую итерацию анимации.После этого он срабатывает без задержки! 

@-webkit-keyframes width {
  0% {
    width: 0px;
  }
  100% {
    width: 600px;
  }
}

div {
  width: 0px;
  height: 40px;
  padding-left: 0px;
  margin: 10px 0;
  color: white;
  font: 18px Georgia;
  line-height: 40px;
  vertical-align: middle;
  background: #05f;
  -webkit-animation: width 15s infinite;
  -moz-animation: width 15s infinite;
  -o-animation: width 15s infinite;
}

#div1 {
  background-color:	#008000;
  -webkit-animation-timing-function: linear;
  -webkit-animation-duration: 6s;
  -webkit-animation-delay: 3s;
  -webkit-animation-iteration-count: 8;
}

#div2 {
  background-color:#ff0000;
  -webkit-animation-timing-function: linear;
  -webkit-animation-duration: 4s;
  -webkit-animation-delay: 9s;
  -webkit-animation-iteration-count: 8;
}

  #div1 {
  -webkit-animation-timing-function: linear;
  -webkit-animation-duration: 6s;
  -webkit-animation-delay: 3s;
  -webkit-animation-iteration-count: 8;
}

#div2 {
  -webkit-animation-timing-function: linear;
  -webkit-animation-duration: 4s;
  -webkit-animation-delay: 9s;
  -webkit-animation-iteration-count: 8;
}
<div id="div1">1st line</div>
<div id="div2">2nd line</div>
<div id="p_bar" class="p_bar"></div>

1 Ответ

0 голосов
/ 24 сентября 2018

Чтобы запустить три анимации подряд, я бы предложил создать одну анимацию, которая будет выполнять одну треть от общей продолжительности, а затем вы добавляете три разных -webkit-animation-delay для каждой из них.Пожалуйста, смотрите ниже пример: 

@-webkit-keyframes width {
    0% {
        width: 0px;
    }
    33.33% {
        width: 600px;
    }
    100% {
        width: 600px;
    }
}
div {
    width: 0px;
    height: 40px;
    padding-left: 0px;
    margin: 10px 0;
    color: white;
    font: 18px Georgia;
    line-height: 40px;
    vertical-align: middle;
    -webkit-animation: width 15s 8;
    -moz-animation: width 15s 8;
    -o-animation: width 15s 8;
    -webkit-animation-timing-function: linear;
}

#div1 {
    background-color: #008000;
}

#div2 {
    background-color:#ff0000;
    -webkit-animation-delay: 5s;
}

#div3 {
    background-color:#0055ff;
    -webkit-animation-delay: 10s;
}
<div id="div1">1st line</div>
<div id="div2">2nd line</div>
<div id="div3">3rd line</div>
...