Как заставить эту анимацию работать в Edge?

Question

У меня есть несколько звезд, которые должны вращаться вокруг. Я получил это работает в Chrome / Firefox / Opera, но не могу заставить его работать в Edge / IE. Там могут быть некоторые улучшения в коде. Я открыт для улучшений. Анимация работает во всех других браузерах (кроме Edge) так, как она должна быть.

Вот соответствующая часть моего кода:

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

Спасибо за все ответы и предложения и извините за мой английский (я из Германии).

Answer 1

Вы столкнулись с этой ошибкой : Edge не может использовать calc() в переходах и анимации CSS.

Чтобы обойти это, вам нужно жестко закодировать эти переходы для Edge или просто написать цикл SCSS @for, чтобы сделать это для вас, основываясь на текущем значении --duration.

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

Рабочий пример (CSS, так как у SO еще нет SCSS):

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