K3NN3TH K3NN3TH - 2 months ago 11
CSS Question

CSS Keyframes using calc with Mircrosoft Edge

So it appears Microsoft Edge doesn't allow the use of CSS calc() within @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);}
}


Is there a workaround for this issue without using third party scripts?

Answer

Without knowing the exact circustances it's hard to be precise but instead of using calc use a transform.

It looks like you're centering the element at the end of the animation but half of it's final width so:

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

Comments