css - css动画期间奇怪的拖尾效果
问题描述
当我遇到这个奇怪的问题时,我正在制作动画。div
下面是一个代码片段,其中包含应用了一些样式和动画的单个代码片段。
当我运行代码时,在动画过程中,我可以在正方形的最右侧看到一个奇怪的拖尾效果。
*{
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 时,看不到任何尾随行。
解决方案
似乎是你的边界在扩展,但不知何故以褪色的形式留在后面。
如果我们举一个更小的例子——没有边界半径,没有弯曲,你可以在这个正方形上清楚地看到它。第一个动画持续时间为 4 秒,并显示单独的线条,这是你得到的,但在圆圈上以小形式显示。第二个动画持续时间为 40 秒,并且显示更连续,正如预期的那样,因为在此期间可能会有更多帧。
这是片段:
<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>
推荐阅读
- javascript - React-router不同路径相同的组件
- robotframework - 机器人框架:是否可以忽略错误“使用参数 [abc] 初始化测试库 'abc' 失败”?
- javascript - 我想列出 JSON 数据中的元素...但我无法获取这些子元素
- c# - 从 Azure Function 发送 SMS Nexmo 出错
- python - Python numpy数组:检查数组中的所有元素是否为0或2,则为真
- reactjs - Material Ui Grid 无法正确缩放
- html - How to take values from datalist dropdown and display it in grid view in asp.net?
- java - 如何在android java中修复sqliteException
- c# - How to update only a few rows using SqlDataAdapter without deleting existing data
- python - 如何通过绘图通过 Python doctest