Как осуществить поэтапную задержку зацикленной анимации на чистом css?

Question

Суть проблемы. У меня есть анимация. Бесконечная. Див постепенно, в три этапа, увеличивает свою ширину (на 15%, потом еще на 15%). Увеличение ширины прописаны в @keyframes. Так вот, я хочу поставить задержку выполнения в несколько секунд (не важно сколько, 2,3,4 секунды) на КАЖДЫЙ(!) этап анимации. То есть, в начале задержка, див увеличился, снова задержка, див увеличился. Но как бы я не пыжился, задержка срабатывает лишь в начале. Подскажите пожалуйста, что я делаю не так.

.out-5 {
  background: darkcyan;
}

.out-5-inner {
  background: DodgerBlue;
    display                  : flex;
    width                    : 15%;
    overflow                 : hidden;
    animation-name           : anim5;
    animation                : anim5 2s 2s linear infinite;
}

p {
  padding: 0px 30px;
  color: red;
}

@keyframes anim5 {
    to {
        width: 30%;
    }
}
@keyframes anim5 {
    to {
        width: 45%;
    }
}

<div class="out-5">
  <div class="out-5-inner">
    <p>Text1</p>
    <p>Text2</p>
    <p>Text3</p>
  </div>
</div>

Answer 1

Согласно уточненным данным в комментариях от автора вопроса, будем считать:

Продолжительность анимации одного (а их два) увеличения ширины - по 2сек * 2 = 4сек

До первого увеличения ширины, и между первым и вторым - по 1сек * 2 = 2сек

После второго увеличения до возврата в исходную позицию, и возврат в исходную позицию - по 1сек * 2 = 2сек

Всего получаем 8сек - это 100%. 100% делим на 8сек = 12,5% - это 1сек

.out-5 {
  background: darkcyan;
}

.out-5-inner {
  background: DodgerBlue;
  display: flex;
  width: 15%;
  overflow: hidden;
  animation-name: anim5;
  animation: ani 8s linear infinite; /*8s - 100%; 1s - 12.5%*/
}

p {
  padding: 0px 30px;
  color: red;
}

@keyframes ani {
  0% {width: 15%;}
  /*задержка перед первым увеличением ширины - 1с*/
  12.5% {width: 15%;}
  /*первое увеличение ширины - 2с*/
  37.5% {width: 30%;}
  /*задержка перед вторым увеличением ширины - 1с*/
  50% {width: 30%;}
  /*второе увеличение ширины - 2с*/
  75% {width: 45%;}
  /*задержка перед возвратом в исходное состояние - 1с*/
  87.5% {width: 45%;}
  /*возврат в исходное состояние - 1с*/
  100% {width: 15%;}
}

<div class="out-5">
  <div class="out-5-inner">
    <p>Text1</p>
    <p>Text2</p>
    <p>Text3</p>
  </div>
</div>

БЛОГ НА HUSL

Как осуществить поэтапную задержку зацикленной анимации на чистом css?

Ответы (1 шт):