CSS动画时长与JS轮播Interval不同步问题求助

我正在制作一款带圆点缩放跟随效果的轮播组件，将轮播的interval参数设为2000ms，同时CSS动画时长也设置为2000ms。页面加载初期动画与轮播同步，但随着运行时长增加，两者逐渐出现轻微延迟偏差，偏差约3-4ms且会愈发明显。已尝试Swiper、Flickity、Splide三款轮播组件，均存在该问题，调整interval参数也无法完美匹配。

相关代码 #

div.bubble {
    height: 100px;
    border-radius: 1em;
    width: 100px;
    animation: vars 2000ms infinite ease-in-out; /* 此处时长与轮播interval一致 */
}

补充说明 #

• 演示示例：可复现该同步偏差问题的交互场景
• 问题视频：展示偏差随时间逐渐明显的直观效果

内容的提问来源于stack exchange，提问作者Aurore