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

我有一个简单的引导进度条，我想给它一个无限的闪烁效果。因此，我编写了所需的代码，它可以很好地显示闪烁效果，但是如果我用

float

更改进度条的方向，我会发现一个问题并停止闪烁

SO中的现场演示：

.parrent{
边界半径：10px；
-webkit转换：translateZ（0）；
宽度：100px；
保证金：0自动；
}
.孩子{
宽度：80%！重要；
过渡：一切都很轻松；
不透明度：.3；
}
.空的{
-webkit动画名称：空动画；
-webkit动画迭代计数：无限；
-webkit动画计时功能：立方贝塞尔（.5,0,1,1）；
-webkit动画持续时间：1.7秒；
}
@-webkit关键帧空动画{
0%{不透明度：1；}
50%{不透明度：.3；}
100%{不透明度：1；}
}

A.无闪烁问题：

B.有闪烁问题：

只需删除转换：translate（0）；属性，所有内容都将按需要工作

.parrent{
边界半径：10px；
/*-webkit转换：translateZ（0）*/
宽度：100px；
保证金：0自动；
}
.孩子{
宽度：80%！重要；
过渡：一切都很轻松；
不透明度：.3；
}
.空的{
-webkit动画名称：空动画；
-webkit动画迭代计数：无限；
-webkit动画计时功能：立方贝塞尔（.5,0,1,1）；
-webkit动画持续时间：1.7秒；
}
@-webkit为空动画设置关键帧{
0% {
不透明度：1；
}
50% {
不透明度：.3；
}
100% {
不透明度：1；
}
}

A.无闪烁问题：
B.有闪烁问题：

多亏了，它的评论解决了这个问题：

加

到

.child

类

SO中的现场演示：

.parrent{
边界半径：10px；
-webkit转换：translateZ（0）；
宽度：100px；
保证金：0自动；
}
.孩子{
宽度：80%！重要；
过渡：一切都很轻松；
不透明度：.3；
-webkit转换：translateZ（10px）；
变换：translateZ（10px）；
}
.空的{
-webkit动画名称：空动画；
-webkit动画迭代计数：无限；
-webkit动画计时功能：立方贝塞尔（.5,0,1,1）；
-webkit动画持续时间：1.7秒；
}
@-webkit关键帧空动画{
0%{不透明度：1；}
50%{不透明度：.3；}
100%{不透明度：1；}
}

A.无闪烁问题：

B.有闪烁问题：

它们似乎都在闪烁。。。问题是什么？在我的浏览器中，第一个进度条（A）具有闪烁效果！我的浏览器：Google Chrome版本56.0.2924.87，这是我正在使用的同一个浏览器，它们都在闪烁第二个div在Opera 43Add

-webkit transform:translateZ（10px）中不为我闪烁；变换：translateZ（10px）

到您的

.child

类。您的答案不正确，因为您答案中进度条的4个角未舍入，但我在问题中尝试将其设置为舍入，问题是在动画期间基本保持圆角。

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