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

的孩子

Answer 2

进度条的ID是唯一的，您必须更改其他进度条ID才能成功运行

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

2 个答案: