CSS 在 Microsoft Edge 中使用 calc 的关键帧

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%;
    }
}

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%;
    }
}

<div></div>

CSS 在 Microsoft Edge 中使用 calc 的关键帧

CSS Keyframes using calc with Mircrosoft Edge

css

css-transforms

css-animations

microsoft-edge