How to get this animation working in Edge?

Question

I got a few stars that should rotate around. I got it working in Chrome/Firefox/Opera but can't get it working in Edge/IE. There may be some improvements to the code. I am open for improvements. The animation works in all other browsers (exept for Edge) how it is supposed to be.

Here's the relevant part of my code:

:root{
    --duration: 4s;
}
.checked {
    color: orange;
}

#loader {
    list-style: none;
    top: 50%;
    left: 50%;
    position: absolute;
}

li {
    position: absolute;
}
span {
    visibility: hidden;
}
ul li:nth-child(1) > span {
    animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 0);
    -webkit-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 0);
    -moz-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 0);
    -o-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 0);
}

ul li:nth-child(2) > span {
    animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 1);
    -webkit-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 1);
    -moz-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 1);
    -o-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 1);
}

ul li:nth-child(3) > span {
    animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 2);
    -webkit-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 2);
    -moz-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 2);
    -o-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 2);
}

ul li:nth-child(4) > span {
    animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 3);
    -webkit-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 3);
    -moz-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 3);
    -o-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 3);
}

ul li:nth-child(5) > span {
    animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 4);
    -webkit-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 4);
    -moz-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 4);
    -o-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 4);
}

ul li:nth-child(6) > span {
    animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 5);
    -webkit-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 5);
    -moz-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 5);
    -o-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 5);
}

ul li:nth-child(7) > span {
    animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 6);
    -webkit-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 6);
    -moz-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 6);
    -o-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 6);
}

ul li:nth-child(8) > span {
    animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 7);
    -webkit-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 7);
    -moz-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 7);
    -o-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 7);
}

ul li:nth-child(9) > span {
    animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 8);
    -webkit-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 8);
    -moz-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 8);
    -o-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 8);
}

ul li:nth-child(10) > span {
    animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 9);
    -webkit-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 9);
    -moz-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 9);
    -o-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 9);
}

ul li:nth-child(11) > span {
    animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 10);
    -webkit-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 10);
    -moz-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 10);
    -o-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 10);
}

ul li:nth-child(12) > span {
    animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 11);
    -webkit-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 11);
    -moz-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 11);
    -o-animation: rot1 var(--duration) infinite linear calc(var(--duration)/12 * 11);
}

@keyframes rot1 {
    from {
        visibility: visible;
        transform: rotate(0deg) translate(-60px) rotate(0deg);
    }
    to {
        visibility: visible;
        transform: rotate(360deg) translate(-60px) rotate(-360deg);
    }
}
@-webkit-keyframes rot1 {
    from {
        visibility: visible;
        transform: rotate(0deg) translate(-60px) rotate(0deg);
    }
    to {
        visibility: visible;
        transform: rotate(360deg) translate(-60px) rotate(-360deg);
    }
}
@-moz-keyframes rot1 {
    from {
        visibility: visible;
        transform: rotate(0deg) translate(-60px) rotate(0deg);
    }
    to {
        visibility: visible;
        transform: rotate(360deg) translate(-60px) rotate(-360deg);
    }
}
@-o-keyframes rot1 {
    from {
        visibility: visible;
        transform: rotate(0deg) translate(-60px) rotate(0deg);
    }
    to {
        visibility: visible;
        transform: rotate(360deg) translate(-60px) rotate(-360deg);
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/loader.css">
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="loader-inner">
    <ul id="loader">
        <li><span class="fa fa-star checked"></span></li>
        <li><span class="fa fa-star checked"></span></li>
        <li><span class="fa fa-star checked"></span></li>
        <li><span class="fa fa-star checked"></span></li>
        <li><span class="fa fa-star checked"></span></li>
        <li><span class="fa fa-star checked"></span></li>
        <li><span class="fa fa-star checked"></span></li>
        <li><span class="fa fa-star checked"></span></li>
        <li><span class="fa fa-star checked"></span></li>
        <li><span class="fa fa-star checked"></span></li>
        <li><span class="fa fa-star checked"></span></li>
        <li><span class="fa fa-star checked"></span></li>
    </ul>
</div>
</body>
</html>

Thanks for all replies and suggestions and sorry for my english (I am from Germany).

Answer 1

You've come across this bug: Edge can't make use of calc() in CSS transitions and animations.

To work around it, you'll need to hardcode those transitions for Edge or simply write an SCSS @for loop to do it for you, based on current --duration value.

jsFiddle with SCSS: https://jsfiddle.net/websiter/bgfu5aeo/

Working example (CSS, as SO doesn't have SCSS yet):

* {
    --duration: 2.5s;
    --size: 240px;
    --qrtr: -webkit-calc(var(--size) / -4);
    --qrtr:    -moz-calc(var(--size) / -4);
    --qrtr:         calc(var(--size) / -4);
}

.loader-inner {
    width: var(--size);
    margin: -webkit-calc(var(--size) / 2) auto 0;
    margin:    -moz-calc(var(--size) / 2) auto 0;
    margin:         calc(var(--size) / 2) auto 0;
}

#loader {
    position: relative;
    height: var(--size);
    list-style-type: none;
}

#loader li {
    position: absolute;
}

#loader li i {
    visibility: hidden;
    -webkit-animation: rot1 var(--duration) infinite linear;
       -moz-animation: rot1 var(--duration) infinite linear;
         -o-animation: rot1 var(--duration) infinite linear;
            animation: rot1 var(--duration) infinite linear;
}

#loader li:nth-child(1) > i {
    -webkit-animation-delay: -webkit-calc(var(--duration) / 12s * 0);
       -moz-animation-delay:    -moz-calc(var(--duration) / 12s * 0);
         -o-animation-delay:         calc(var(--duration) / 12s * 0);
            animation-delay: 0s;
}

#loader li:nth-child(2) > i {
    -webkit-animation-delay: -webkit-calc(var(--duration) / 12s * 1);
       -moz-animation-delay:    -moz-calc(var(--duration) / 12s * 1);
         -o-animation-delay:         calc(var(--duration) / 12s * 1);
            animation-delay: 0.20833s;
}

#loader li:nth-child(3) > i {
    -webkit-animation-delay: -webkit-calc(var(--duration) / 12s * 2);
       -moz-animation-delay:    -moz-calc(var(--duration) / 12s * 2);
         -o-animation-delay:         calc(var(--duration) / 12s * 2);
            animation-delay: 0.41667s;
}

#loader li:nth-child(4) > i {
    -webkit-animation-delay: -webkit-calc(var(--duration) / 12s * 3);
       -moz-animation-delay:    -moz-calc(var(--duration) / 12s * 3);
         -o-animation-delay:         calc(var(--duration) / 12s * 3);
            animation-delay: 0.625s;
}

#loader li:nth-child(5) > i {
    -webkit-animation-delay: -webkit-calc(var(--duration) / 12s * 4);
       -moz-animation-delay:    -moz-calc(var(--duration) / 12s * 4);
         -o-animation-delay:         calc(var(--duration) / 12s * 4);
            animation-delay: 0.83333s;
}

#loader li:nth-child(6) > i {
    -webkit-animation-delay: -webkit-calc(var(--duration) / 12s * 5);
       -moz-animation-delay:    -moz-calc(var(--duration) / 12s * 5);
         -o-animation-delay:         calc(var(--duration) / 12s * 5);
            animation-delay: 1.04167s;
}

#loader li:nth-child(7) > i {
    -webkit-animation-delay: -webkit-calc(var(--duration) / 12s * 6);
       -moz-animation-delay:    -moz-calc(var(--duration) / 12s * 6);
         -o-animation-delay:         calc(var(--duration) / 12s * 6);
            animation-delay: 1.25s;
}

#loader li:nth-child(8) > i {
    -webkit-animation-delay: -webkit-calc(var(--duration) / 12s * 7);
       -moz-animation-delay:    -moz-calc(var(--duration) / 12s * 7);
         -o-animation-delay:         calc(var(--duration) / 12s * 7);
            animation-delay: 1.45833s;
}

#loader li:nth-child(9) > i {
    -webkit-animation-delay: -webkit-calc(var(--duration) / 12s * 8);
       -moz-animation-delay:    -moz-calc(var(--duration) / 12s * 8);
         -o-animation-delay:         calc(var(--duration) / 12s * 8);
            animation-delay: 1.66667s;
}

#loader li:nth-child(10) > i {
    -webkit-animation-delay: -webkit-calc(var(--duration) / 12s * 9);
       -moz-animation-delay:    -moz-calc(var(--duration) / 12s * 9);
         -o-animation-delay:         calc(var(--duration) / 12s * 9);
            animation-delay: 1.875s;
}

#loader li:nth-child(11) > i {
    -webkit-animation-delay: -webkit-calc(var(--duration) / 12s * 10);
       -moz-animation-delay:    -moz-calc(var(--duration) / 12s * 10);
         -o-animation-delay:         calc(var(--duration) / 12s * 10);
            animation-delay: 2.0833s;
}

#loader li:nth-child(12) > i {
    -webkit-animation-delay: -webkit-calc(var(--duration) / 12s * 11);
       -moz-animation-delay:    -moz-calc(var(--duration) / 12s * 11);
         -o-animation-delay:         calc(var(--duration) / 12s * 11);
            animation-delay: 2.29167s;
}

@-webkit-keyframes rot1 {
    from {
        -webkit-transform: rotate(0deg) translate(var(--qrtr)) rotate(0deg);
                transform: rotate(0deg) translate(var(--qrtr)) rotate(0deg);
    }
    to {
        visibility: visible;
        -webkit-transform: rotate(360deg) translate(var(--qrtr)) rotate(-360deg);
                transform: rotate(360deg) translate(var(--qrtr)) rotate(-360deg);
    }
}

@-moz-keyframes rot1 {
    from {
        -moz-transform: rotate(0deg) translate(var(--qrtr)) rotate(0deg);
             transform: rotate(0deg) translate(var(--qrtr)) rotate(0deg);
    }
    to {
        visibility: visible;
        -moz-transform: rotate(360deg) translate(var(--qrtr)) rotate(-360deg);
             transform: rotate(360deg) translate(var(--qrtr)) rotate(-360deg);
    }
}

@-o-keyframes rot1 {
    from {
        -o-transform: rotate(0deg) translate(var(--qrtr)) rotate(0deg);
           transform: rotate(0deg) translate(var(--qrtr)) rotate(0deg);
    }
    to {
        visibility: visible;
        -o-transform: rotate(360deg) translate(var(--qrtr)) rotate(-360deg);
           transform: rotate(360deg) translate(var(--qrtr)) rotate(-360deg);
    }
}

@keyframes rot1 {
    from {
        -webkit-transform: rotate(0deg) translate(var(--qrtr)) rotate(0deg);
           -moz-transform: rotate(0deg) translate(var(--qrtr)) rotate(0deg);
             -o-transform: rotate(0deg) translate(var(--qrtr)) rotate(0deg);
                transform: rotate(0deg) translate(var(--qrtr)) rotate(0deg);
    }
    to {
        visibility: visible;
        -webkit-transform: rotate(360deg) translate(var(--qrtr)) rotate(-360deg);
           -moz-transform: rotate(360deg) translate(var(--qrtr)) rotate(-360deg);
             -o-transform: rotate(360deg) translate(var(--qrtr)) rotate(-360deg);
                transform: rotate(360deg) translate(var(--qrtr)) rotate(-360deg);
    }
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="loader-inner">
  <ul id="loader">
    <li><i class="fa fa-star checked"></i></li>
    <li><i class="fa fa-star checked"></i></li>
    <li><i class="fa fa-star checked"></i></li>
    <li><i class="fa fa-star checked"></i></li>
    <li><i class="fa fa-star checked"></i></li>
    <li><i class="fa fa-star checked"></i></li>
    <li><i class="fa fa-star checked"></i></li>
    <li><i class="fa fa-star checked"></i></li>
    <li><i class="fa fa-star checked"></i></li>
    <li><i class="fa fa-star checked"></i></li>
    <li><i class="fa fa-star checked"></i></li>
    <li><i class="fa fa-star checked"></i></li>
  </ul>
</div>