CSS关键帧只在Safari上出现故障

Question

正如标题所说，我的关键帧只在Safari上出现故障。它在moz，ms，o上运行得非常好，但不适用于safari。这是我的关键帧的代码：

@keyframes bar_progress {
  0%  { width: 0%;  left:0; }
  25% { width: 20%; left:50%;}
  50% { width: 0%;  left:100%; }
  75% { width: 20%; left:50%;}
  100%{ width: 0%;  left:0;} 
}

@-webkit-keyframes bar_progress {
  0%  { width: 0%;  left:0; }
  25% { width: 20%; left:50%;}
  50% { width: 0%;  left:100%; }
  75% { width: 20%; left:50%;}
  100%{ width: 0%;  left:0;} 
}

@-moz-keyframes bar_progress {
  0%  { width: 0%;  left:0; }
  25% { width: 20%; left:50%;}
  50% { width: 0%;  left:100%; }
  75% { width: 20%; left:50%;}
  100%{ width: 0%;  left:0;} 
}

@-ms-keyframes bar_progress {
  0%  { width: 0%;  left:0; }
  25% { width: 20%; left:50%;}
  50% { width: 0%;  left:100%; }
  75% { width: 20%; left:50%;}
  100%{ width: 0%;  left:0;} 
}

@-o-keyframes bar_progress {
  0%  { width: 0%;  left:0; }
  25% { width: 20%; left:50%;}
  50% { width: 0%;  left:100%; }
  75% { width: 20%; left:50%;}
  100%{ width: 0%;  left:0;} 
}

这是我的progress_bar类调用关键帧：

.progress_bar {
  position:absolute;
  left:0;
  top:0;
  width:0%;
  height:2px; 
  background: blue;
  animation: bar_progress 2s linear infinite;
  -webkit-animation: bar_progress 2s linear infinite;
  -moz-animation: bar_progress 2s linear infinite;
  -ms-animation: bar_progress 2s linear infinite;
  -o-animation: bar_progress 2s linear infinite;
}

提前谢谢！