Css 背景色转换&；不透明度转换前后同步问题

我目前在使用前后伪元素的导航项目中面临褪色问题

当我将导航项目悬停时，它必须将其背景颜色从白色更改为蓝色。没什么疯狂的。 但它还必须显示两个背景图像，分别将：：before伪元素从0更改为1，将：：after伪元素从0更改为1

问题是，尽管我设置了相同的过渡持续时间，但元素的淡入淡出行为与背景色本身的过渡略有不同

您还可以通过快速地进出鼠标来“玩”悬停（jsfiddle），以便更清楚地看到问题

如果有人能帮我解决这个问题，我将不胜感激：）

这是我的JSFIDLE：

以下是过渡问题的屏幕截图：

a{
显示：块；
宽度：61px；
高度：67px；
利润率：50像素；
背景色：#fff；
文本对齐：居中；
字体系列：“Roboto”，无衬线；
文字装饰：无；
线高：67px；
颜色：#259cff；
位置：相对位置；
过渡：背景色0.3s，颜色0.3s；
}
a：：之前，a：：之后{
不透明度：0；
身高：100%；
位置：绝对位置；
排名：0；
内容：“；
-webkit过渡：不透明度0.3s，宽度0.3s，左侧0.3s，右侧0.3s；
过渡：不透明度0.3s，宽度0.3s，左侧0.3s，右侧0.3s；
}
a:以前{
宽度：12px；
左-12px；
背景：url（“https://svgshare.com/i/J61.svg）无重复0；
背景尺寸：自动100%；
}
a:之后{
宽度：12px；
右：-12px；
背景：url（“https://svgshare.com/i/J4j.svg）无重复100%；
背景尺寸：自动100%；
}
a:悬停{
背景色：#259cff；
颜色：#fff；
}
a:hover:：before，a:hover:：after{
不透明度：1；
宽度：17px；
}
a:悬停：：之前{
左：-17px；
}
a:悬停：：之后{
右：-17px；
}

---

您可以简化如下效果，而无需SVG，也无需依赖一个伪元素来实现整个形状：

a{
显示：块；
宽度：61px；
高度：67px；
利润率：50像素；
文本对齐：居中；
字体系列：“Roboto”，无衬线；
文字装饰：无；
线高：67px；
颜色：#259cff；
位置：相对位置；
过渡：0.2s；
}
a:以前{
内容：“；
位置：绝对位置；
z指数：-1；
排名：0；
底部：0；
左：0；
右：0；
不透明度：0；
填充：0 15px；
背景：
线性渐变（#259cff，#259cff）内容框，
线性渐变（至右上角，透明47%，#259cff 50%）左/15px 100%，
线性梯度（至右下角，透明47%，#d4ecff 50%）左/15px 100%，
线性渐变（至左下角，透明47%，#259cff 50%）右侧/15px 100%，
线性梯度（至左上角，透明47%，#d4ecff 50%）右侧/15px 100%；
背景重复：无重复；
过渡：继承；
}
a:悬停：：之前{
左：-17px；
右：-17px；
不透明度：1；
}
a:悬停{
颜色：#fff；
}

---

哇，谢谢你的快速回答：）如果你对我上面提到的行为有任何解释，请告诉我。@Gloubiboulga你的伪元素正在移动，而背景只是出现，因此产生这种效果是合乎逻辑的，因为伪元素将移动并出现，从而产生你看到的小问题。删除不透明度效果并仅保留另一个以了解事实上，如果我删除移动效果并仅保留不透明度效果，它仍将“在不同的时间”显示。延迟仍然存在，正如您在这里看到的：