Weird trailing effect during css animation - css

Question

I am creating an animation while I got this weird issue. Below is a code snippet with a single div with some styles and animation applied to it.
When I run the code, during the animation, I can see a weird trailing effect on the extreme right side of the square.
*{
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>
Whenever I click anywhere or press any button, the trails disappear.
What could be causing this and how should I solve this issue?
Also, this issue occurs only with borders. Without borders, no issue is there.
Update - This issue is with chrome browser only. While using firefox, no trailing lines are visible.

Answer 1

It appears to be your borders that are scaling but somehow remain behind in faded form.
If we take a more minimal example - no border radius, no flexing, you can see it clearly on this square. The first has animation duration 4s and shows separate lines which is what you get but in small form on the circle. The second has animation duration 40s and show more continuous as would be expected as more frames would be possible in the time.
Here's the snippet:
<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>
So, what to do about it? Somehow the borders aren't totally disappearing but are fading.
Update: here's a quick workaround - animating dimensions rather than scaling. I know it's not the best way to animate (as it possibly isn't using the GPU???) but it seems to work. Of course you'd want to put your circle (now a square) into a container which has the actual width and then use %s. It worked on Chrome, Edge, Firefox on Windows 10 and Safari and Chrome on IOS14. It also removed the slight flicker that was previously seen on Firefox and Safari [which had both worked better on the initial code than Edge or Chrome on Win10].
Snippet with workaround:
<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>