👀 Views: 2 💬 Answers: 1 📅 Created: 2025-06-06

html css chrome animations HTML

This might be a silly question, but I tried several approaches but none seem to work. I'm experiencing an scenario with the `<progress>` element in Chrome. When I apply a CSS animation to the progress bar to change its background color, the progress value doesn't seem to update visually as expected. The animation works fine in Firefox, but in Chrome, the progress bar appears to freeze at the last value until the animation completes. I'm using the following HTML structure: ```html <progress id="myProgress" value="50" max="100"></progress> ``` And my CSS for the animation looks like this: ```css #myProgress { width: 100%; height: 20px; background-color: lightblue; transition: background-color 0.5s; } @keyframes changeColor { 0% { background-color: lightblue; } 50% { background-color: lightcoral; } 100% { background-color: lightblue; } } #myProgress.animate { animation: changeColor 2s infinite; } ``` In my JavaScript, I add the animation class like this: ```javascript const progressBar = document.getElementById('myProgress'); progressBar.classList.add('animate'); setInterval(() => { if (progressBar.value < progressBar.max) { progressBar.value += 10; } else { progressBar.value = 0; } }, 1000); ``` In Chrome, the progress updates every second, but visually, it only shows the last value until the animation ends, which is not the behavior I want. I checked the console for any errors but didn't find anything relevant. Is this a known scenario with the `<progress>` element or is there some workaround to make it work smoothly in Chrome? I've tested this in Chrome version 100.0.4896.127 and it seems to be consistent across different machines. Any insights would be appreciated! What's the best practice here?