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

Question

我有一个简单的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; }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

A. Without blink problem:
<div class="parrent progress progress-striped dropdown-toggle">
   <div class="child empty progress-bar progress-bar-danger pull-right" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<hr>
B. With blink Problem:
<div class="parrent progress progress-striped dropdown-toggle">
   <div class="child empty progress-bar progress-bar-danger pull-left" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>

注意: 2个进度条之间的差异就在于使用pull-leftin(B)而不是pull-rightin(A).

我的问题是为什么以及你有什么建议来解决这个问题？

---

编辑:

我的浏览器:谷歌浏览器版本56.0.2924.87

预习:

Answer 1

感谢@vanburen，它的评论解决了问题：

添加

-webkit-transform: translateZ(10px);
transform: translateZ(10px);

到.child班级

SO 中的现场演示：

-webkit-transform: translateZ(10px);
transform: translateZ(10px);

.parrent{
     border-radius:10px;
     -webkit-transform: translateZ(0);
     width:100px;
     margin:0 auto;
}
.child{
     width: 80% !important;
     transition: all 2s ease;
     opacity: .3;
     -webkit-transform: translateZ(10px);
     transform: translateZ(10px);
}
.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; }
}