Html CSS3动画正在震动

我目前正在构建一个交互式地图，我有各种动画元素，我目前正在处理。但是，我注意到，动画在制作动画时会有轻微的跳跃/抖动

你可以看到我的密码笔

有人知道他们为什么会微微颤抖吗？我已经检查了所有浏览器，震动是最小的，但仍然有影响

@charset“UTF-8”；
html，
身体{
-webkit文本大小调整：100%；
保证金：0；
填充：0；
身高：100%；
宽度：100%；
}
* {
框大小：边框框；
字体系列：Helvetica Neue、Helvetica、Arial、无衬线字体；
大纲：0；
}
img{
最大宽度：100%；
高度：自动；
}
.map容器{
身高：100%；
宽度：100%；
}
.地图{
位置：相对位置；
身高：100%；
宽度：100%；
显示器：flex；
柔性包装：包装；
对齐项目：居中；
证明内容：中心；
}
.桌面地图{
位置：相对位置；
溢出：隐藏；
}
.animations>div{
位置：绝对位置；
}
.气球-1{
宽度：4.5%；
身高：9%；
背景图像：url（“https://www.ec-projects.co.uk/map/balloon-1.png");
背景重复：无重复；
左：12%；
最高：14%；
z指数：1；
动画：气球14s无限线性；
}
@关键帧气球1{
0% {
左：12%；
最高：14%；
}
50% {
左：12%；
最高：2.5%；
}
20% {
左：12%；
最高：14%；
}
}
.气球-2{
宽度：4.5%；
身高：9%；
背景图像：url（“https://www.ec-projects.co.uk/map/balloon-2.png");
背景重复：无重复；
左：6.5%；
最高：21%；
z指数：1；
动画：气球2 14s无限线性；
动画延迟：1s；
}
@关键帧气球2{
0% {
左：6.5%；
最高：21%；
}
50% {
左：6.5%；
最高：15%；
}
20% {
左：6.5%；
最高：21%；
}
}
.car-1{
宽度：1.5%；
身高：1.5%；
背景图片：url(https://www.ec-projects.co.uk/map/car-1.png);
背景重复：无重复；
右：22%；
底部：32.25%；
z指数：1；
动画：CAR130S无限线性；
动画延迟：1s；
-webkit背面可见性：隐藏；
}
@关键帧car1{
0% {
右：22%；
底部：32.25%；
}
100% {
右：57.25%；
底部：-0.4%；
}
}

---

这是因为气球覆盖的距离与动画时间不同步

你必须走100公里，你有100天的时间才能走完这段距离，那么你的行动就像是缓慢的移动（停下来然后移动）。如果你必须跑100公里，你有10分钟的时间，那么你的运动就像跑（快）。你必须调整气球运动的计时

请用下面更新的css替换css并检查

另外请检查片段，调整动画时间以查看效果。你可以确定一个你认为适合你需要的持续时间

@charset“UTF-8”；
html，
身体{
-webkit文本大小调整：100%；
保证金：0；
填充：0；
身高：100%；
宽度：100%；
}
* {
框大小：边框框；
字体系列：Helvetica Neue、Helvetica、Arial、无衬线字体；
大纲：0；
}
img{
最大宽度：100%；
高度：自动；
}
.map容器{
身高：100%；
宽度：100%；
}
.地图{
位置：相对位置；
身高：100%；
宽度：100%；
显示器：flex；
柔性包装：包装；
对齐项目：居中；
证明内容：中心；
}
.桌面地图{
位置：相对位置；
溢出：隐藏；
/*背景图像：url（“背景图像：uri”（）https://www.ec-projects.co.uk/map/map.png"); */
背景色：#中交；
身高：100%；
宽度：100%；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
}
.animations>div{
位置：绝对位置；
}
.气球-1{
宽度：100%；
身高：100%；
背景图像：url（“https://www.ec-projects.co.uk/map/balloon-1.png");
背景重复：无重复；
左：20%；
最高：5%；
z指数：1；
背面可见性：隐藏；
前景：1 000；
动画：气球1 20秒无限线性；
}
@关键帧气球1{
0% {
转化：translateY（100%）；
}
50% {
变换：translateY（0）
}
100% {
转换：translateY（100%）
}
}
.气球-2{
宽度：100%；
身高：100%；
背景图像：url（“https://www.ec-projects.co.uk/map/balloon-2.png");
背景重复：无重复；
左：6.5%；
排名：0；
z指数：1；
背面可见性：隐藏；
前景：1 000；
动画：气球2 30s无限线性；
动画延迟：.5s；
}
@关键帧气球2{
0% {
转换：translateY（100%）
}
50% {
变换：translateY（0）
}
100% {
转换：translateY（100%）
}
}
.car-1{
宽度：6%；
身高：10%；
背景图片：url(https://www.ec-projects.co.uk/map/car-1.png);
背景重复：无重复；
z指数：1；
动画：CAR110S无限线性；
动画延迟：1s；
-webkit背面可见性：隐藏；
}
@关键帧car1{
0% {
右：22%；
底部：32.25%；
}
100% {
右：57.25%；
底部：-0.4%；
}
}

---

这是因为气球覆盖的距离与动画时间不同步

你必须走100公里，你有100天的时间走完这段距离，然后你的mov