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

Question

我有一个简单的bootstrap进度条，我想给它一个无限的闪烁效果。所以我写了所需的代码，它显示了闪烁的效果，但如果我用float更改进度条的方向，问题就会显示给我，闪烁将停止！

Live demo in 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-left）中使用B而在（pull-right）中使用A

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

编辑：

我的浏览器：Google Chrome版本56.0.2924.87

预览：

Answer 1

只需删除transform：translate（0）;来自父类的属性，一切都将按预期工作..

.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>

Answer 2

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

  

添加

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

     

到.child班级

SO中的现场演示：

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

<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>