IE10 - Progress bar animation issue
- by user3723885
I'm trying to incorporate some animated progress bars but I'm having trouble getting them to animate in IE10. I believe the problem is due to the keyframes being inside the media query but have not been able to get it working. Thanks for your help.
HTML:
<td><div style="width:150px;height:15px;border:1px solid black">
<div class="meter">
<span style="width:85%;"><span class="progress"></span></span>
</div>
</div></td></tr>
CSS:
.progress {
background-color: #325C74;
-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%; }
}
