Stop shaking in CSS animation-CodePudding

So I'm making a tic tac toe game right now and I'm trying to add in an animation for a line that shows who won. When the player wins by getting 3 horizontal things then the animation works perfectly but when they win vertically then there's a slight shake on it. Is there any way I can remove this?

Here is the CSS for the line:

@keyframes grow-left {
    0% {
        width: 0;
    }

    100% {
        width: 1;
    }
}

.winLine {
    position: absolute;
    width: 300%;
    height: var(--borderThickness);
    background-color: var(--textColor);
    border-radius: 1rem;
    transform-origin: center;
    z-index: 2;
    animation: grow-left 1s ease-in-out 0s;
    opacity: 1;
}

To view the website and see what I'm talking about it's live on GitHub at this link https://bartycoding.github.io/Tic-tac-toe/

CodePudding user response：

Try creating another div that increases the height instead of using the transform: rotate(90deg);

CodePudding user response：

You could try with transform: scale():

@keyframes grow-left {
    0% {
        transform: scale(0,1);
    }

    100% {
        transform: scale(1,1);
    }
}

CodePudding user response：

I actually fixed this by having the rotation as a global css variable and then changing that variable from javascript so the css looks like this:

@keyframes grow-left {
    0% {
        transform: rotate(var(--winLineRotation)) scaleX(0);
    }

    100% {
        transform: rotate(var(--winLineRotation)) scaleX(100%);
    }
}

.winLine {
    position: absolute;
    width: 300%;
    height: var(--borderThickness);
    background-color: var(--textColor);
    border-radius: 1rem;
    transform-origin: center;
    z-index: 2;
    animation: grow-left 1s ease-in-out 0s;
    opacity: 1;
    transform: rotate(var(--winLineRotation));
}