在 CSS 动画中停止摇晃

Question

所以我现在正在制作一个井字游戏，我正在尝试添加一个动画来显示谁赢了。当玩家通过获得 3 个水平的东西获胜时，动画效果完美，但当他们垂直获胜时，动画会轻微晃动。有什么方法可以删除它吗？

这是该行的 CSS：

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

要查看该网站并了解我在说什么，它会在 GitHub 直播 link https://bartycoding.github.io/Tic-tac-toe/

Answer 1

尝试创建另一个 div 来增加高度而不是使用变换：rotate(90deg);

Answer 2

你可以试试 transform: scale():

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

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

Answer 3

我实际上通过将旋转作为全局 css 变量然后从 javascript 更改该变量来解决此问题，因此 css 看起来像这样：

@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));
}

在 CSS 动画中停止摇晃

Stop shaking in CSS animation

css

css-animations