Html 带有转换的CSS

我正在做的一个项目有问题， 当我将div卡悬停时，我将背景图像从jpg更改为gif，并通过flexbox grow调整其大小

然而，在转换过程中，GIF图像似乎在颤抖。 我曾尝试更改要翻译的边距，以及在堆栈溢出上发现的一些代码，但不幸的是，这些代码并没有为我做到这一点：

body，
html{
保证金：0；
身高：100%；
}
.一般货柜{
显示器：flex；
证明内容：中心；
对齐项目：居中；
身高：100%；
宽度100%；
}
.载有卡片{
位置：相对位置；
背景色：#F2F2；
高度：600px；
宽度：1500px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
皮隆先生{
宽度：8%；
身高：70%；
边界半径：15px；
背景颜色：绿色；
利润率：1%；
过渡：所有1600ms缓解；
光标：指针；
滤镜：灰度（100%）；
-webkit过滤器：灰度（100%）；
/*在堆栈溢出上找到的代码，对我不起作用*/
-webkit背面可见性：隐藏；
-webkit变换：translateZ（0）标度（1.0,1.0）；
}
#地图{
转换：翻译（0%，3%）；
}
#将军，
#诺蒂夫{
转换：翻译（0%，-3%）；
}
#用法，
#历史{
转换：翻译（0%，0%）；
;
}
#一般的{
背景图像：url（'https://iili.io/2kw2Fn.jpg');
}
#一般：悬停{
背景图像：url（'https://i.ibb.co/68MVb2c/data-gif.gif');
}
#用法{
背景图像：url（'https://iili.io/2khoOl.jpg');
}
#用法：悬停{
背景图像：url（'https://i.ibb.co/rwcxwtN/usage-gif.gif');
}
#地图{
背景图像：url（'https://iili.io/2ksJPs.jpg');
}
#将军，
#用法，
#地图{
溢出：隐藏；
背景尺寸：封面；
背景位置：中心；
}
#将军：悬停，
#用法：悬停，
#地图：悬停{
溢出：隐藏；
背景尺寸：封面；
背景位置：中心；
}
皮隆：悬停{
柔性生长：2；
过滤器：无；
-webkit过滤器：灰度（0）；
}
@媒体屏幕和屏幕（最大宽度：1800px）{
.载有卡片{
高度：300px；
宽度：750px；
}
皮隆先生{
边界半径：10px；
}
}
@媒体屏幕和屏幕（最大宽度：1100px）{
.载有卡片{
高度：150像素；
宽度：375px；
}
皮隆先生{
边界半径：5px；
}
}
@媒体屏幕和屏幕（最大宽度：500px）{
.载有卡片{
高度：75px；
宽度：187.5px；
}
}

我不明白你得到了什么样的震动，在片段中看起来不错，不是吗？嗨：）不幸的是，不是全屏。试着用整页打开这个片段震动不是很大，但仍然很麻烦，特别是如果你第一次悬停的话。对不起，我还是看不到。当我打开它并将图片悬停时，它会展开并转换为gif格式，在展开的最后会有一点“跳跃”，但不会晃动。这个bug看起来像是自己消失了。。。如果这个问题再次出现，我会让它保持打开状态，否则我会在几天内删除它。我不明白你得到了什么，它在片段中看起来不错，不是吗？嗨：）不幸的是，不是全屏。试着用整页打开这个片段震动不是很大，但仍然很麻烦，特别是如果你第一次悬停的话。对不起，我还是看不到。当我打开它并将图片悬停时，它会展开并转换为gif格式，在展开的最后会有一点“跳跃”，但不会晃动。这个bug看起来像是自己消失了。。。我会留下这个问题，以防它回来，否则我会删除它在几天内