html - Css - 具有不同进度百分比的多动画进度条

Question

我有一个动画进度条，效果很好，但我想要不止一个具有不同百分比的进度条我已经试过了，我在下面添加了一个 jsfiddle。

Jsfiddle 演示:https://jsfiddle.net/8sja2577/

---

 <p><span class="subtitle"><h3>bar1</h3></span></p>
      <div id="progressbar"><div id="other" ><div id="pbaranim"></div></div></div>

  <p><span class="subtitle"><h3>bar2</h3></span></p>
  <div id="progressbar"><div id="progress" ><div id="pbaranim"></div></div></div>

---

CSS

---

#progressbar {
width: 100%;
height: 21px;
background-color: #ccc;
padding: 2px;
margin: .6em 0;
border: 1px #000 double;
clear: both;
border-radius:20px;
}

#progress {
border-radius:20px;
background: red; /*-- Color of the bar --*/
height: 15px;
width: 0%;
max-width: 100%;
float: left;
-webkit-animation: progress 2s 1 forwards;
-moz-animation: progress 2s 1 forwards;
-ms-animation: progress 2s 1 forwards;
animation: progress 2s 1 forwards;
} 

#other {
border-radius:20px;
background: red; /*-- Color of the bar --*/
height: 15px;
width: 0%;
max-width: 100%;
float: left;
-webkit-animation: progress 2s 1 forwards;
-moz-animation: progress 2s 1 forwards;
-ms-animation: progress 2s 1 forwards;
animation: progress 2s 1 forwards;
}

#pbaranim {
height: 15px;
width: 100%;
overflow: hidden;
background: url('http://www.cssdeck.com/uploads/media/items/7/7uo1osj.gif') repeat-x;
-moz-opacity: 0.25;
-khtml-opacity: 0.25;
opacity: 0.25;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=25);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=25);
filter: alpha(opacity=25);


@-webkit-keyframes other { from { } to { width: 100% }}

@-moz-keyframes other { from { } to { width: 100% }}

@-ms-keyframes other { from { } to { width: 100% }}

@keyframes other { from { } to { width: 100% }}



@-webkit-keyframes progress { from { }to { width: 36% }}

@-moz-keyframes progress { from { } to { width: 36% }}

@-ms-keyframes progress { from { } to { width: 36% }}

@keyframes progress { from { } to { width: 36% }}

Answer 1

您需要更改other 样式才能使用other 动画:

#other {
    border-radius:20px;
    background: red;
    height: 15px;
    width: 0%;
    max-width: 100%;
    float: left;
    -webkit-animation: other 2s 1 forwards;
    -moz-animation: other 2s 1 forwards;
    -ms-animation: other 2s 1 forwards;
    animation: other 2s 1 forwards;
}

Fixed fiddle (using classes instead of ids)

请注意，id 应该是唯一的，h3 不能是 p 或 span

的子元素