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