动画css属性中的calc（）仅在microsft边缘不起作用

Question

此加载器动画在Chrome，Opera，Firefox和Safari中也能正常工作。但是不能在Microsoft Edge中使用

<div class="_preLoader" style="--n:5">
            <div class="_circle _c1" style="--i:0"></div>
            <div class="_circle _c2" style="--i:1"></div>
            <div class="_circle _c3" style="--i:2"></div>
            <div class="_circle _c4" style="--i:3"></div>
            <div class="_circle _c5" style="--i:4"></div>
        </div>

样式

._preloader {
        display: flex;
        align-content: space-around;
        justify-content: center;
    }

    ._circle,
    ._circle::after {
        background: rgb(255, 99, 71);
        display: inline-block;
        width: 2em;
        height: 2em;
        border-radius: 50%;
        animation: a 1s calc(((var(--i) + var(--o, 0))/var(--n) - 1)*1s) infinite
    }


    ._circle::after {
        --o: 1;
        background: #3C4252;
        content: ''
    }



    @keyframes a {
        0%,
        50% {
            transform: scale(0)
        }

此jsfiddle https://jsfiddle.net/03ddygdx/20/在上述浏览器中完美展示了动画，除了microsft edge。