图像网格在Edge以外的所有浏览器中工作

Question

我正在建立一个工作组合网站，在其着陆页上有一个响应式图像网格。我想要包含一个图像块，它在悬停时快速连续显示5个不同的图片，所以我决定使用CSS动画功能从大矩形图像上的一个点“跳转”（4000 x 800，具有五个独特的徽标）到另一个。

使用CSS动画迫使我“设置”动画块的样式，使其与每个断点处其他块的大小相匹配。这似乎在我测试的每个浏览器（Chrome，Firefox，Safari）中都很有用，除了Edge。

在Edge中，由于我不明白的原因，这会“撞出”一块不合适的地方。

现在我想知道我是否必须放弃使用CSS代替jQuery解决方案以实现跨浏览器兼容性，因此对于解决方案的任何建议/建议都将不胜感激！

这是Chrome中的页面...

......这里是Edge

动画块是以字母'A'

为特色的块

这是我用来获得'A'块以适应不同断点处其余部分的CSS：

/*-- Logo Animation Hover Breakpoints --*/
@media (min-width: 1500px){
.logoswitch {
  background: url('../img/logo_thumb_bar.jpg');
  height: 448px;
  width: 448px;
  background-size: cover;
}

@keyframes play {
  100% { background-position: 2240px; }
}
#logohover:hover .logoswitch{
  -webkit-animation: notexistent;
  -moz-animation: notexistent;
  -o-animation: notexistent;
  -ms-animation: notexistent;
  animation: notexistent;
  -webkit-animation: play 2.5s steps(5) infinite;
  -moz-animation: play 2.5s steps(5) infinite;
  -o-animation: play 2.5s steps(5) infinite;
  -ms-animation: play 2.5s steps(5) infinite;
  animation: play 2.5s steps(5) infinite;
}
}

@media (min-width: 1200px) and (max-width: 1500px){
  .logoswitch {
  background: url('../img/logo_thumb_bar.jpg');
  height: 390px;
  width: 390px;
  background-size: cover;
}

@keyframes play {
  100% { background-position: 1950px; }
}
#logohover:hover .logoswitch{
 -webkit-animation: notexistent;
 -moz-animation: notexistent;
 -o-animation: notexistent;
 -ms-animation: notexistent;
 animation: notexistent;
 -webkit-animation: play 2.5s steps(5) infinite;
 -moz-animation: play 2.5s steps(5) infinite;
 -o-animation: play 2.5s steps(5) infinite;
 -ms-animation: play 2.5s steps(5) infinite;
 animation: play 2.5s steps(5) infinite;
 }
 }

 @media (min-width: 992px) and (max-width: 1200px){
 .logoswitch {
 background: url('../img/logo_thumb_bar.jpg');
 height: 323.33px;
 width: 323.33px;
 background-size: cover;
 }

 @keyframes play {
 100% { background-position: 1616.65px; }
 }
 #logohover:hover .logoswitch{
 -webkit-animation: notexistent;
 -moz-animation: notexistent;
 -o-animation: notexistent;
 -ms-animation: notexistent;
 animation: notexistent;
 -webkit-animation: play 2.5s steps(5) infinite;
 -moz-animation: play 2.5s steps(5) infinite;
 -o-animation: play 2.5s steps(5) infinite;
 -ms-animation: play 2.5s steps(5) infinite;
 animation: play 2.5s steps(5) infinite;
 }
 }

 @media (min-width: 768px) and (max-width: 992px){
 .logoswitch {
 background: url('../img/logo_thumb_bar.jpg');
 height: 250px;
 width: 250px;
 background-size: cover;
 }

 @keyframes play {
 100% { background-position: 1250px; }
 }
 #logohover:hover .logoswitch{
 -webkit-animation: notexistent;
 -moz-animation: notexistent;
 -o-animation: notexistent;
 -ms-animation: notexistent;
 animation: notexistent;
 -webkit-animation: play 2.5s steps(5) infinite;
 -moz-animation: play 2.5s steps(5) infinite;
 -o-animation: play 2.5s steps(5) infinite;
 -ms-animation: play 2.5s steps(5) infinite;
 animation: play 2.5s steps(5) infinite;
 }
 }

@media (max-width: 768px){
.logoswitch {
background: url('../img/logo_thumb_bar.jpg');
height: 50vw;
width: 50vw;
background-size: cover;
}

@keyframes play {
100% { background-position: 250vw; }
}
#logohover:hover .logoswitch{
-webkit-animation: notexistent;
-moz-animation: notexistent;
-o-animation: notexistent;
-ms-animation: notexistent;
animation: notexistent;
-webkit-animation: play 2.5s steps(5) infinite;
-moz-animation: play 2.5s steps(5) infinite;
-o-animation: play 2.5s steps(5) infinite;
-ms-animation: play 2.5s steps(5) infinite;
animation: play 2.5s steps(5) infinite;
}
}