Html 为什么我的边缘CSS动画变得不同步？

有人能解释一下我下面的代码在Microsoft Edge中是如何不同步的吗。如果观察几个循环（10秒），则淡入淡出和移动动画不同步，看起来不正确。它应该逐渐消失，然后在显示之前重置中间一个盒子后面的盒子。每个循环都会使它越来越不同步

.rhu\u bswn\u软件包{
职位：相对
}
.rhu\u bswn\u红色\u包装{
位置：绝对位置；
宽度：33%；
左：10%；
最高：7%；
}
.rhu\u bswn\u蓝色\u包装{
位置：绝对位置；
宽度：39%；
左：32%；
z指数：3；
}
.rhu\U bswn\U黄金包装{
位置：绝对位置；
宽度：33%；
左：60%；
最高：12%；
}
.rhu\u bswn\u红色\u包装{
-webkit动画：rhu_淡入淡出和旋转显示红色10s无限；
动画：rhu_淡入和旋转显示红色10s无限；
不透明度：0.01；
左：34%
}
@-webkit关键帧rhu\U淡入\U和\U旋转\U显示\U红色{
0%{-webkit变换：缩放（0）旋转（6度）；变换：缩放（0.01）旋转（6度）；左侧：34%；不透明度：0；}
10%{-webkit变换：缩放（1）旋转（6度）；变换：缩放（1）旋转（6度）；左侧：34%；不透明度：1；}
20%{左：10%；-webkit变换：缩放（1）旋转（0度）；变换：缩放（1）旋转（0度）；}
80%{左：10%；-webkit变换：缩放（1）；变换：缩放（1）；不透明度：1；}
99%{不透明度：0；-webkit变换：缩放（1）旋转（0度）；变换：缩放（1）旋转（0度）；左：10%；}
100%{左：34%；不透明度：0；}
}
@关键帧rhu\U淡入\U和\U旋转\U显示\U红色{
0%{-webkit变换：缩放（0）旋转（6度）；变换：缩放（0）旋转（6度）；左侧：34%；不透明度：0；}
10%{-webkit变换：缩放（1）旋转（6度）；变换：缩放（1）旋转（6度）；左侧：34%；不透明度：1；}
20%{左：10%；-webkit变换：缩放（1）旋转（0度）；变换：缩放（1）旋转（0度）；}
80%{左：10%；-webkit变换：缩放（1）；变换：缩放（1）；不透明度：1；}
99%{不透明度：0；-webkit变换：缩放（1）旋转（0度）；变换：缩放（1）旋转（0度）；左：10%；}
100%{左：34%；不透明度：0；}
}
.rhu\U bswn\U黄金包装{
-webkit动画：rhu_fade_和_rotate_展示金10s无限；
动画：rhu_fade_和_rotate_展示金10s无限；
不透明度：0；
左：34%；
}
@-webkit关键帧rhu\U淡入淡出和旋转显示黄金{
0%{-webkit变换：缩放（0）旋转（6度）；变换：缩放（0）旋转（6度）；左侧：34%；不透明度：0；}
10%{-webkit变换：缩放（1）旋转（6度）；变换：缩放（1）旋转（6度）；左侧：34%；不透明度：1；}
20%{左：60%；-webkit变换：缩放（1）旋转（0度）；变换：缩放（1）旋转（0度）；}
80%{左：60%；不透明度：1；}
99%{不透明度：0；-webkit变换：缩放（1）旋转（0度）；变换：缩放（1）旋转（0度）；左：60%；}
100%{左：34%；不透明度：0；}
}
@关键帧rhu\U淡入和旋转\U显示\U金色{
0%{-webkit变换：缩放（0）旋转（6度）；变换：缩放（0）旋转（6度）；左侧：34%；不透明度：0；}
10%{-webkit变换：缩放（1）旋转（6度）；变换：缩放（1）旋转（6度）；左侧：34%；不透明度：1；}
20%{左：60%；-webkit变换：缩放（1）旋转（0度）；变换：缩放（1）旋转（0度）；}
80%{左：60%；不透明度：1；}
99%{不透明度：0；-webkit变换：缩放（1）旋转（0度）；变换：缩放（1）旋转（0度）；左：60%；}
100%{左：34%；不透明度：0；}
}
.rhu\u bswn\u蓝色\u包装{
-webkit动画：rhu_淡入淡出和旋转显示_蓝色10s无限；
动画：rhu_淡入_和_旋转_展示_蓝色10s无限；
不透明度：0；
}
@-webkit关键帧rhu\U淡入\U和\U旋转\U显示\U蓝色{
0%{-webkit变换：缩放（0）旋转（9度）；变换：缩放（0）旋转（9度）；不透明度：1；}
10%{-webkit变换：缩放（1）旋转（9度）；变换：缩放（1）旋转（9度）；不透明度：1；}
20%{-webkit变换：缩放（1）旋转（0度）；变换：缩放（1）旋转（0度）；}
80%{-webkit变换：比例（1）；变换：比例（1）；不透明度：1；}
99%{不透明度：0；-webkit变换：缩放（1）旋转（0度）；变换：缩放（1）旋转（0度）；}
}
@关键帧rhu\U淡入\U和\U旋转\U显示\U蓝色{
0%{-webkit变换：缩放（0）旋转（9度）；变换：缩放（0）旋转（9度）；不透明度：1；}
10%{-webkit变换：缩放（1）旋转（9度）；变换：缩放（1）旋转（9度）；不透明度：1；}
20%{-webkit变换：缩放（1）旋转（0度）；变换：缩放（1）旋转（0度）；}
80%{-webkit变换：比例（1）；变换：比例（1）；不透明度：1；}
99%{不透明度：0；-webkit变换：缩放（1）旋转（0度）；变换：缩放（1）旋转（0度）；}
}

注意：

标记不使用，也不需要结束斜杠，而且在HTML中从未使用过。还要注意的是，您可能不需要webkit前缀，因为浏览器已经可以使用这些前缀很多年了。我正在与其他高级工程师确认这一点，如果我有任何更新，我会通知你。感谢您的理解。注意：

标记不使用，也不需要结束斜杠，而且在HTML中从未使用过。还要注意的是，您可能不需要webkit前缀，因为浏览器已经可以使用这些前缀很多年了。我正在与其他高级工程师确认这一点，如果我有任何更新，我会通知你。谢谢你的理解。