进度条样式正常但动画失效，多浏览器环境下技术排查求助

Hey there! Let's get to the bottom of why your progress bar animation isn't working across all the browsers you tested. I looked over your code and spotted the main culprit right away.

The Root Cause #

You’ve added an inline style='WIDTH:70%;' to your .progress-value div in the HTML. In CSS, inline styles have higher specificity than @keyframes rules. This means the animation’s starting value (width:0) gets completely overridden—your div starts at 70% width immediately, so you can’t see the animation play out at all.

The Fix #

Remove that inline width style from your HTML element. If you want to target the 70% progress (matching your progress-2 animation), use the existing .red class instead of inline styles. Here’s the corrected code:

Corrected CSS (your original CSS is fine, no changes needed) #

.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%; } }

Corrected HTML #

<DIV ID='dvLoading' STYLE='POSITION:relative;TOP:-300px;LEFT:30%;'>
  <DIV class='progress-bar'>
    <!-- Use the .red class to get the 70% progress animation -->
    <DIV class='progress-value red'></DIV>
  </DIV>
</DIV>

Why This Works #

By removing the inline style, the animation can now start from width:0 as defined in the keyframes, and smoothly transition to the target width set in the corresponding animation rule. Using classes like .red or .green instead of inline styles keeps your code organized and avoids specificity conflicts that break animations.

A quick side note: While you included -webkit- prefixes for older browsers, all the modern browsers you tested (Chrome, Firefox, Edge, Opera) support unprefixed @keyframes today—though keeping the prefixes is still a good idea for broader compatibility, especially since you’re testing IE.

内容的提问来源于stack exchange，提问作者craigt