Бар выглядит правильно. Почему анимация не работает?

Question

Я новичок в анимации. Я выбрал некоторый код с демонстрацией, которая работала в 5 браузерах, в которых я тестирую. Я на Windows 10 и имею последние версии 5 браузеров, в которых я тестирую (Chrome, FF, edge IE и Opera. CSS следует.

.progress-bar {
  margin-bottom: 1rem;
  background-color: tomato;
  border-radius: 1.25em;
  width: 300px;
  height: 16px;
  display: inline-block;
}

.progress-value {
  background-color: MEDIUMBLUE;
  transition: 0.3s all linear;
  border-radius: 1.25em;
  height: 16px;
  display: inline-block;
  animation: progress 3s ease-in-out forwards;
  -webkit-animation: progress 3s ease-in-out forwards;
}

.progress-value.green {
  background-color: MEDIUMSEAGREEN;
  animation: progress-3 3s ease-in-out forwards;
  -webkit-animation: progress-3 3s ease-in-out forwards;
}

.progress-value.red {
  background-color: TOMATO;
  animation: progress-2 3s ease-in-out forwards;
  -webkit-animation: progress-2 3s ease-in-out forwards;
}


/* animation */

@keyframes progress {
  from {
    width: 0;
  }
  to {
    width: 55%;
  }
}

@-webkit-keyframes progress {
  from {
    width: 0;
  }
  to {
    width: 55%;
  }
}

@keyframes progress-2 {
  from {
    width: 0;
  }
  to {
    width: 70%;
  }
}

@-webkit-keyframes progress-2 {
  from {
    width: 0;
  }
  to {
    width: 70%;
  }
}

@keyframes progress-3 {
  from {
    width: 0;
  }
  to {
    width: 90%;
  }
}

@-webkit-keyframes progress-3 {
  from {
    width: 0;
  }
  to {
    width: 90%;
  }
}

<DIV ID='dvLoading' STYLE='POSITION:relative;TOP:-300px;LEFT:30%;'>
  <DIV class='progress-bar'>
    <DIV class='progress-value' style='WIDTH:70%;'></DIV>
  </DIV>
</DIV>

Бар выглядит так, как я надеялся. Но нет анимации ни в одном из 5 браузеров.

Answer 1

Вот рабочий и лучший код для вас. Вместо того, чтобы создавать анимацию для каждого значения прогресса, измените ширину дочернего элемента и покажите индикатор внутри дочернего элемента и анимируйте его один раз (от width: 0% до width: 100% width). Я создал простой индикатор выполнения с 4 вариантами цвета.

.progress {
  width: 500px;
  height: 30px;
  border-radius: 15px;
  overflow: hidden;
  background: #eee;
  position: relative;
}

.progress>.progress-value {
  position: relative;
  height: 100%;
  left: 0;
  top: 0;
}

.progress>.progress-value::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  animation: progress-value 3s ease-in-out forwards;
  -webkit-animation: progress-value 3s ease-in-out forwards;
  background: #666;
}

.progress>.progress-value.red::before {
  background: #f44;
}

.progress>.progress-value.green::before {
  background: #3f4;
}

.progress>.progress-value.blue::before {
  background: #54f;
}

@keyframes progress-value {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

@-webkit-keyframes progress-value {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

<div class="progress">
  <div class="progress-value" style="width: 65%"></div>
</div>

<div style="height: 15px"></div>

<div class="progress">
  <div class="progress-value red" style="width: 95%"></div>
</div>

<div style="height: 15px"></div>

<div class="progress">
  <div class="progress-value green" style="width: 41%"></div>
</div>

<div style="height: 15px"></div>

<div class="progress">
  <div class="progress-value blue" style="width: 14%"></div>
</div>

Answer 2

То, что я сделал, работает, как я надеялся, что я загружаю индикатор в виде файла HTML в объект в процессе CGI и помещаю этот объект в центр V / H iframe. Я поместил задержку в 1 секунду в JavaScript, который выполняется при загрузке содержимого IFRAME (ONLOAD), чтобы выключить индикатор, чтобы гарантировать, что хотя бы небольшая часть индикатора будет видна при очень быстрой загрузке. Спасибо всем. кт