复制图像并设置悬停CSS

我想制作以下动画：

带有两个相同箭头的一个div和悬停时的第一个箭头应向左/向右移动。我试着去做，但没有成功。我正在用两幅图像设置背景，但如何为其中一幅图像（如gif）设置动画

.arrow-right2 {
    content: "";
    background: transparent url(https://i.imgur.com/u7cYXIo.png) 0 -185px no-repeat, transparent url(https://i.imgur.com/u7cYXIo.png) 0 -185px no-repeat;
    height: 35px;
    position: absolute;
    top: -5%;
    left: 0;
    width: 35px;
}

---

您可以调整

背景位置

，如下所示。从每个位置的不同位置开始，然后使它们相同：

.arrow{
背景：
网址(https://i.imgur.com/u7cYXIo.png)-10px-185px，
网址(https://i.imgur.com/u7cYXIo.png)10px-185px，
红色
背景重复：无重复；
高度：50px；
宽度：50px；
过渡：均为0.5s；
}
.箭头：悬停{
背景位置：10px-185px；
}

---

尝试使用两个具有相同箭头的不同div，使用绝对位置，并使用它重叠两个箭头。如果可以，请使用单个图像，而不是精灵。然后在其中一个图像上应用悬停效果

正文{
背景：红色；
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：100vh；
}
.集装箱{
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：50px；
高度：50px；
位置：相对位置；
}
.箭头1{
背景：url（'https://i.imgur.com/u7cYXIo.png'）无重复-17px-199px；
宽度：12px；
高度：24px；
显示：块；
左：0；
位置：绝对位置；
}
.箭头2{
背景：url（'https://i.imgur.com/u7cYXIo.png'）无重复-17px-199px；
宽度：12px；
高度：24px；
显示：块；
位置：绝对位置；
过渡：全部为0.4s；
左：0；
}
.箭头2：悬停{
左：-10px；
过渡：全部为0.4s；
}

你能分享箭头的真实图像吗？这是一个精灵->我编辑了我的答案，加入了颜色更改。这没关系，但是如何将箭头颜色更改为悬停时的红色，如gif？你必须在精灵中添加一个红色箭头，或者开始使用SVG图像，允许你在CSS中更改图像颜色。或者使用两个不同颜色的单个png图像。