如何使此动画在Edge中工作？

时间：2019-01-13 15:05:38

标签： html css animation transform microsoft-edge

我有几颗恒星应该旋转。我可以在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>

感谢您的所有答复和建议，并感谢我的英语（我来自德国）。

1 个答案:

答案 0 :(得分：2)

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

要解决此问题，您需要对Edge的过渡进行硬编码，或仅基于当前@for的值编写一个SCSS --duration循环为您完成此操作。

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

相关问题
最新问题