使用 calc 和 Mircrosoft Edge 的 CSS 关键帧

Question

因此，Microsoft Edge 似乎不允许在 @keyframes 中使用 CSS calc()？

@keyframes logoanimatestart{
    from {transform: rotateY(360deg); width:50px; height:50px;top:-80px; left:100%;}
    to  {transform: rotateY(0deg); width:100px; height:100px; top:50px; left:calc(50% - 50px);}
}

在不使用第三方脚本的情况下，是否有解决此问题的方法？

Answer 1

在不知道确切情况的情况下，很难做到精确，但不要calc使用变换。

看起来您在动画结束时将元素居中，但最终宽度的一半是：

@keyframes logoanimatestart {
    from {
        transform: translateX(0)rotateY(360deg);
        width:50px;
        height:50px;
        top:-80px;
        left:100%;
    }
    to {
        transform: translateX(-50%) rotateY(0deg);
        width:100px;
        height:100px;
        top:50px;
        left:50%;
    }
}

@keyframes logoanimatestart {
    from {
        transform: translateX(0)rotateY(360deg);
        width:50px;
        height:50px;
        top:-80px;
        left:100%;
    }
    to {
        transform: translateX(-50%) rotateY(0deg);
        width:100px;
        height:100px;
        top:50px;
        left:50%;
    }
}

div {
    width: 50px;
    height: 50px;
    position: absolute;
    background: #000;
    animation:logoanimatestart 5s linear infinite;

}

@keyframes logoanimatestart {
    from {
        transform: translateX(0)rotateY(360deg);
        width:50px;
        height:50px;
        top:-80px;
        left:100%;
    }
    to {
        transform: translateX(-50%) rotateY(0deg);
        width:100px;
        height:100px;
        top:50px;
        left:50%;
    }
}