一直有100％进度条

Question

我正在尝试将进度条动画化为它的实际宽度，但是，它会一直填充到100％。那么如何将进度条的宽度引用到CSS中呢？因为我有多个酒吧，我不能修复的CSS或写多个。

.progressing {
  -webkit-animation: progressBar 3s ease-in-out;
  -webkit-animation-fill-mode: both;
  -moz-animation: progressBar 3s ease-in-out;
  -moz-animation-fill-mode: both;
}

@-webkit-keyframes progressBar {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

@-moz-keyframes progressBar {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<table id="announcementtable" class="table table-hover" style="text-align: center;width: 90%;margin: auto;">
  <tbody>
    <tr>
      <th style="">#</th>
      <th style="border-left-width: 0px;" colspan="2">title</th>
      <th></th>
    </tr>
    <tr class="toprow" style="">
      <td class="fold">6</td>
      <td class="fold" style="border-left-width: 0px;" colspan="2">news1</td>
      <td style="border-right-width: 0px;"></td>
    </tr>
    <tr style="display: ;">
      <td class="">%</td>
      <td style="border-left-width: 0px;" colspan="3">
        <p style="margin:auto;left: 66.5%;transform: translate(-50%,0%);position: absolute;color:white;">80%</p>
        <div class="progress" style="margin: auto;margin-right: 1%;border-radius: 5px;height: 20px;">
          <div class="progress-bar progress-bar-striped bg-success progress-bar-animated progressing" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="80" style="width: 80%;font-size: .875rem;"></div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

将width更改为max-width

.progressing {
    -webkit-animation: progressBar 3s ease-in-out;
    -webkit-animation-fill-mode:both; 
    -moz-animation: progressBar 3s ease-in-out;
    -moz-animation-fill-mode:both; 
}

@-webkit-keyframes progressBar {
  0% { max-width: 0; }
  100% { max-width: 100%; }
}

@-moz-keyframes progressBar {
  0% { max-width: 0; }
  100% { max-width: 100%; }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<table id="announcementtable" class="table table-hover" style="text-align: center;width: 90%;margin: auto;">
        	<tbody>
        		<tr>
        			<th style="">#</th>
        			<th style="border-left-width: 0px;" colspan="2">title</th>
        			<th></th>
        		</tr>
        		<tr class="toprow" style="">
        			<td class="fold">6</td>
        			<td class="fold" style="border-left-width: 0px;" colspan="2">news1</td>
        			<td style="border-right-width: 0px;"></td>
        		</tr>
        		<tr style="display: ;">
        			<td class="">%</td>
        			<td style="border-left-width: 0px;" colspan="3">
        				<p style="margin:auto;left: 66.5%;transform: translate(-50%,0%);position: absolute;color:white;">80%</p>
        				<div class="progress" style="margin: auto;margin-right: 1%;border-radius: 5px;height: 20px;">  
        					<div class="progress-bar progress-bar-striped bg-success progress-bar-animated progressing" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="80" style="width: 80%;font-size: .875rem;"></div>
        				</div>
        			</td>
        		</tr>
                    		<tr style="display: ;">
        			<td class="">%</td>
        			<td style="border-left-width: 0px;" colspan="3">
        				<p style="margin:auto;left: 66.5%;transform: translate(-50%,0%);position: absolute;color:white;">90%</p>
        				<div class="progress" style="margin: auto;margin-right: 1%;border-radius: 5px;height: 20px;">  
        					<div class="progress-bar progress-bar-striped bg-success progress-bar-animated progressing" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="80" style="width: 90%;font-size: .875rem;"></div>
        				</div>
        			</td>
        		</tr>
                    		<tr style="display: ;">
        			<td class="">%</td>
        			<td style="border-left-width: 0px;" colspan="3">
        				<p style="margin:auto;left: 66.5%;transform: translate(-50%,0%);position: absolute;color:white;">60%</p>
        				<div class="progress" style="margin: auto;margin-right: 1%;border-radius: 5px;height: 20px;">  
        					<div class="progress-bar progress-bar-striped bg-success progress-bar-animated progressing" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="80" style="width: 60%;font-size: .875rem;"></div>
        				</div>
        			</td>
        		</tr>
        	</tbody>
        </table>