Jquery CSS动画创建“闪烁”；“边界框”；设置填充动画时

我正在尝试设置一个圆形div的动画，以产生类似涟漪的效果，填充它的容器。应该有一个初始波纹（边界），然后是主形状扩展以填充容器

我通过设置circle div的边框宽度和填充的动画来实现涟漪，从而将边框向外推

问题是，当填充设置动画时，circle div的边界框闪烁为白色。如果我删除动画的填充部分，只设置边框宽度的动画，则不会出现闪烁，因此我知道是填充导致了问题

@keyframes circle {
0% {
    width:0.001px;
    border-width:0px;
    padding:0px;
}
50% {
    width:0.001px;
    border-width:100px;
    padding:400px;
}
100% {
    width:125%;
    border-width:100px;
    padding:400px;
}
}

证明。单击灰色框将其激活

编辑：在Firefox中测试后，它可以正常工作。可能是webkit特定的

编辑2:2我见过的修复通用“动画期间闪烁”错误的常见解决方案是添加样式

-webkit-transform-style: preserve-3d;

或

对冒犯的元素。我试过这些，但都没修好

最初，我使用多个循环div和一系列带有转换的类（表示动画的各种状态）完成了这个动画，然后使用setInterval延迟触发这些类。现在我对CSS动画已经比较熟悉了，我正试图重新编码，使其对CPU更加友好，因为旧的方法在旧的笔记本电脑上运行得很快。我假设一个圆div比多个圆div更有效，调用一个动画比不断添加和删除类更有效？

bug导致 webkit bug与正在设置动画的填充有关（如您所述）。在本例中，我将填充角色替换为宽度和高度

其他变化

• 通过单击类添加动画，然后删除该类。这样，动画就可以反复使用

• 我已更改关键帧，以便在动画结束时，白色慢慢变为透明

关于前缀的注记

• 在

  动画

  属性中，您可能需要的唯一前缀是

  -webkit-

• 不带前缀的本机

  转换
  属性

• 本机的

  transform

  属性是，您可能需要的唯一前缀是

  -webkit-

例1 根据您的喜好进行调整，边框与背景位于同一元素上，因此它们同时移动

$（“#circleCont”）。单击（函数（）{
$（“.circle”）.addClass（“动画”）；
setTimeout（函数（）{
$（“.circle”）.removeClass（'animated'）；
}, 4000);
});
.circle{
位置：绝对位置；
最高：50%；
左：50%；
保证金：自动；
边框：0实心#FFF；
显示：块；
边界半径：50%；
背景色：白色；
背景剪辑：内容框；
转换：翻译（-50%，-50%）；
z指数：2；
}
#圆环体{
显示：内联块；
位置：绝对位置；
宽度：100%；
最高：50%；
转化：translateY（-50%）；
z指数：2；
框阴影：插入0px 0px 0px 0px rgba（0,0,0,0）；
过渡：框阴影0.1s；
}
#circleCont:之后{
内容：''；
显示：块；
利润率最高：100%；
}
#英雄{
宽度：600px；
高度：400px；
背景色：#ddd；
位置：绝对位置；
溢出：隐藏；
}
.动画{
动画：向前旋转4s
}
@关键帧圆{
0% {
宽度：0；
边框宽度：0px；
身高：0；
}
25% {
边框宽度：100px；
宽度：400px；
高度：400px；
}
50% {
高度：800px；
宽度：800px；
边框宽度：100px；
填充：400px；
背景：#FFF；
}
100% {
高度：800px；
宽度：800px；
边框宽度：100px；
填充：400px；
背景：透明；
}
}

单击灰色框时，我什么也没发生。我在使用firefox。@RohitGupta他在使用webkit属性。它可能只在Chrome和Safari中工作。@RohitGupta正如Manoj提到的，我使用的是webkit属性，但已经更新了fiddle，以便在Firefox上工作。我在Firefox中的测试中注意到没有问题，所以这可能是webkit特有的问题。我明白了。。。这似乎有效，但就我个人而言，我不明白为什么？如果不是示例中的填充，是什么将边界推离了圆的主体？我似乎无法解释这是如何工作的，特别是因为我已经在代码中使用了宽度和高度，但您对它的使用似乎以某种方式修复了错误。你能解释一下你是如何得出这个解决方案的吗？另外，我想推迟主循环的增长，这样它就不会和涟漪同时开始。我在这里尝试过这样做，但是如果2不同时增长，闪烁就会返回。关于其工作原理：。第一个div没有高度或宽度，只有填充（顶部、右侧、底部和左侧的填充为100px）。第二个div的高度和宽度为200px，占用相同的空间。它们为空时看起来相同。请查看我的编辑。示例2有一个单独的边界波纹元素。这样我们可以延迟主循环动画的启动。它必须是一个单独的元素才能工作。
-webkit-backface-visibility: hidden;