Ключевые кадры CSS с использованием calc с Mircrosoft Edge

Question

Таким образом, кажется, что Microsoft Edge не позволяет использовать CSS calc() в @keyframes?

@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>