如何让这个动画在 Edge 中工作？答案

【问题标题】：How to get this animation working in Edge?如何让这个动画在 Edge 中工作？
【发布时间】：2019-06-07 18:29:07
【问题描述】：

我得到了一些应该旋转的星星。我让它在 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>

感谢所有回复和建议，对不起我的英语（我来自德国）。

【问题讨论】：

您发布的内容在任何浏览器中都不起作用，因为它不完整。因此，没有人（除了你）可以看到它应该是什么样子。我已将您的代码组装成一个可运行的示例，但您需要向其中添加更多代码以将其转换为 minimal reproducible example - 它应该在按下“运行代码 sn-p”时显示动画。
好的，现在应该没问题了！对此感到抱歉。 ^^ 我只发布了我的代码的一部分，因为它是为了比赛，我不确定我是否可以在这里发布完整的项目。但是这里发布的代码应该可以清楚我的问题。
我继续制作了自己的版本：jsfiddle.net/93cg0s21 并发现了原因：Edge 在animation-delay 中与calc() 存在问题，AFAICT。没有找到任何关于它的文档，但它显然失败了。因此，“修复”将是硬编码这些持续时间。
好的，谢谢！

标签： html css animation transform microsoft-edge

【解决方案1】：

您遇到过this bug：Edge 无法在 CSS 过渡和动画中使用 calc()。

要解决这个问题，您需要为 Edge 硬编码这些转换，或者只需根据当前的 --duration 值编写一个 SCSS @for 循环来为您执行此操作。

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>

【讨论】：