更改浮动方向时如何防止CSS动画停止？

我有一个简单的bootstrap进度条,我想给它一个无限的闪烁效果.所以我写了所需的代码,它显示了闪烁的效果,但如果我改变进度条的方向,float问题显示给我,闪烁将停止!

在JsFiddel现场演示

SO中的现场演示:

.parrent{
  border-radius:10px;
      -webkit-transform: translateZ(0);
      width:100px;
      margin:0 auto;
}
.child{
  width: 80% !important;
  transition: all 2s ease;
  opacity: .3;
}
.empty{
    -webkit-animation-name: empty-anim;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);
    -webkit-animation-duration: 1.7s;
}

@-webkit-keyframes empty-anim {  
  0% { opacity: 1; }
  50% { opacity: .3; }
  100% { opacity: 1; }
}