在 CSS 动画中停止摇晃答案

【问题标题】：Stop shaking in CSS animation在 CSS 动画中停止摇晃
【发布时间】：2022-12-18 00:02:26
【问题描述】：

所以我现在正在制作一个井字游戏，我正在尝试添加一个动画来显示谁赢了。当玩家通过获得 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 上的此链接 https://bartycoding.github.io/Tic-tac-toe/

【问题讨论】：

垂直获胜后，Chrome 似乎没有表现出“轻微晃动”。这是浏览器特定的问题吗？
经过进一步审查，在与 Chrome 垂直获胜后，可以看到非常轻微的抖动。结果可能因运行此 CSS 动画的系统上的不同图形处理器而异。

标签： css css-animations

【解决方案1】：

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

【讨论】：

我可以这样做，但是代码会变得混乱，因为我需要不同的水平、垂直和倾斜样式以及不同的动画，这是我最好避免的事情

【解决方案2】：

你可以试试transform: scale()：

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

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

【讨论】：

我确实考虑过这样做，但这会干扰变换：旋转（90 度）并且不会应用任何旋转
你可以做到transform: scale(0,1) rotate(90deg);。
旋转是使用 javascript 作为内联样式应用的，所以我不能这样做，因为旋转会改变

【解决方案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));
}

【讨论】：

【解决方案4】：

为防止动画结束时出现轻微抖动，您需要使用：backface-visibility:hidden; 作为您为其定义动画的元素的类。

重要的: 不要将此规则定义到 @keyframes 并将其定义到该元素的类中，如下所示：.class-name { backface-visibility:hidden; }

【讨论】：