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

Posted 2023-03-06

【中文标题】如何让这个动画在 Edge 中工作？

【英文标题】：How to get this animation working in 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。没有找到任何关于它的文档，但它显然失败了。因此，“修复”将是硬编码这些持续时间。

好的，谢谢！

【参考方案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>