CSS Marquee on MS Edge

Question

I found this awesome CSS-Marquee and it works almost on every Browser, but unfortunately not on MS Edge. When you hover over the Marquee is should stop, but Edge don't like

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

It's even worse, because Edge makes it impossible to mark the text in the Marquee and all Links in the Marquee are broken.

Here is the full code:

<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;
}

Any Solutions for that ? Maybe a separate CSS for Edge? And is it possible to make the animation speed the same for different text length?

EDIT: OK ! So i found a way to make the speed the same with different text 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>

But there is still the problem, that Edge don't like "animation-play-state: paused;" and break all the Links in the Marquee

Answer 1

Ok ! This is my solution ! It has now the same speed with different text length and i overwrite the css if Edge is used. Now the Marquee stops at almost every Browser if you hover over the Marquee and in Edge the animation-play-state: paused; is changed to animation-play-state: running;

Here is the code for the same speed:

<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>

And here is the code for Edge:

@supports (-ms-ime-align:auto) {
  .marquee span:hover { animation-play-state: running; } 
}

If you have a better solution for that where the animation stops with Edge, than pls post it!!!