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中的所有鏈接