0

正如标题所说，我的关键帧仅在 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;
}

先感谢您！

4

0 回答 0