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>

使用calc与Mircrosoft Edge的CSS关键帧

1 个答案: