MS边缘上的CSS Marquee

Question

我发现this awesome CSS-Marquee，它几乎适用于所有浏览器，但不幸的是不在MS Edge上。当你将鼠标悬停在字幕是应该停止，但边缘不喜欢

.marquee span:hover 
{ 
    animation-play-state: paused; 
} 

它甚至更糟，因为边缘使其无法标志着字幕文本和跑马灯各个环节都坏了。

下面是完整的代码：

<div class="marquee"> 
    <span>Some long text with a few <a href="#">Links</a> and bla bla</span> 
</div> 

/* define the animation */ 
@keyframes marquee 
{ 
    0% { transform: translate(0, 0); } 
    100% { transform: translate(-100%, 0); } 
} 

/* define your limiting container */ 
.marquee 
{ 
    width: 100%; 
    margin: 0 auto; 
    white-space: nowrap; 
    overflow: hidden; 
    box-sizing: border-box; 
} 

/* this is the tray moving around your container */ 
.marquee span 
{ 
    display: inline-block; 
    padding-left: 100%; 
    text-indent: 0; 
    animation: marquee 60s linear infinite; /* here you select the animation */ 
} 

/* pause the animation on mouse over */ 
.marquee span:hover 
{ 
    animation-play-state: paused; 
} 

对于任何解决方案？也许一个单独的边缘CSS？ 对于不同的文本长度，可以使动画速度相同吗？编辑： 行！所以，我发现了一个方法，使速度与不同的文本lenght相同：

<script> 
function calcSpeed(speed) { 
// Time = Distance/Speed 
var spanSelector = document.querySelector('.marquee span'); 
var spanLength = spanSelector.offsetWidth; 
var timeTaken = spanLength/speed; 
spanSelector.style.animationDuration = timeTaken + "s"; 
} 
calcSpeed(100); 
</script> 

但仍有问题，该边缘不喜欢“动画播放状态：暂停;”并打破Marquee中的所有链接