css动画期间奇怪的拖尾效果

Question

当我遇到这个奇怪的问题时，我正在制作动画。下面是一个带有单个 div 的代码 sn-p，并应用了一些样式和动画。

当我运行代码时，在动画过程中，我可以在正方形的最右侧看到一个奇怪的拖尾效果。

*{
    margin: 0px;
    padding: 0px;
}

body{
    background-image: radial-gradient(pink, hotpink);
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content:center;
    align-items: center;
}

@keyframes zoominout{
    0%{
        transform: scale(1.0);
    }
    50%{
        transform: scale(1.1);
    }
    100%{
        transform: scale(1.0);
    }
}

#outer{
    border: 2px solid black;
    height: 450px;
    width: 450px;
    animation: zoominout infinite 4s;
}

<div id="outer"></div>

每当我单击任意位置或按任意按钮时，轨迹都会消失。

这可能是什么原因造成的，我应该如何解决这个问题？

此外，此问题仅发生在边框上。没有国界，就没有问题。

更新 - 此问题仅适用于 chrome 浏览器。使用 firefox 时，看不到任何尾随行。

Answer 1

似乎是您的边界在缩放，但不知何故以褪色的形式留在后面。

如果我们举一个更简单的例子——没有边界半径，没有弯曲，你可以在这个正方形上清楚地看到它。第一个动画持续时间为 4 秒，并显示单独的线条，这是你得到的，但在圆圈上以小形式显示。第二个动画持续时间为 40 秒，并且显示更连续，正如预期的那样，因为在此期间可能会有更多帧。

这是sn-p：

<style>
@keyframes zoominout{
    0%{
        transform: scale(1.0);
    }
    50%{
        transform: scale(1.1);
    }
    100%{
        transform: scale(1.0);
    }
}

#outer{
    border: 2px solid black;
    border-color: magenta;
    height: 450px;
    width: 450px;
    animation: zoominout infinite 4s;
    background-color: cyan;
}
</style>
<div id="outer"></div>

那么，该怎么办呢？不知何故，边界并没有完全消失，而是正在消失。

更新：这里有一个快速的解决方法 - 动画尺寸而不是缩放。我知道这不是制作动画的最佳方式（因为它可能不使用 GPU ？？？），但它似乎有效。当然你想把你的圆圈（现在是一个正方形）放入一个具有实际宽度的容器中，然后使用 %s。它适用于 Windows 10 上的 Chrome、Edge、Firefox 以及 IOS14 上的 Safari 和 Chrome。它还消除了之前在 Firefox 和 Safari 上看到的轻微闪烁（它们在初始代码上的效果都比 Win10 上的 Edge 或 Chrome 更好）。

带有解决方法的代码段：

<style>
*{
    margin: 0px;
    padding: 0px;
}

body{
    background-image: radial-gradient(pink, hotpink);
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content:center;
    align-items: center;
}

@keyframes zoominout{
    0%{
        width: var(--w);
        height: var(--w);
    }
    50%{
        width: calc(var(--w) * 1.1);
        height: calc(var(--w) * 1.1);
    }
    100%{
        width: var(--w);
        height: var(--w);
    }
}


#outer{
    --w: 450px;/* you don't have to use a CSS variable but this is just to make it easier to change the width/height if you need to */
    border: 2px solid black;
    height: var(--w);
    width: var(--w);
    animation: zoominout infinite 4s;
}

</style>
  <div id="outer"></div>