吧台看起来是对的。为什么动画不起作用？

Question

我是动画新手。我选择了一些代码，其中有一个演示程序，可以在我正在测试的5个浏览器中工作。我使用的是Windows10，并且安装了我在其中测试的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进程中的对象中，并将该对象定位在iframe的V/H中心。我在加载(ONLOAD) IFRAME内容时执行的JavaScript中设置了一个1秒的延迟，以关闭指示器，以确保在真正快速的加载中至少可以看到指示器的一小部分。谢谢大家。ct