动画CSS径向渐变具有可见边界

Question

所以我试图在其他HTML控件后面放置一个径向渐变动画（向上移动底部）。

HTML正文有红色。 将颜色更新为黑色

渐变位于div中，具有以下样式：

.bg {
overflow: hidden;
position: auto;
height: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: radial-gradient(circle, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, 0) 100%);


-webkit-animation-name: animatedBackground;
-webkit-animation-duration: 2.5s;}

所以现在当渐变移动到HTML控件后面时，会有一个可见的边界。

您可以观察到有类似边框的东西（以黄色突出显示）。

我正试图摆脱这个边界，以便渐变出现，因为只是一个放射状的东西可能会在边缘上褪色/模糊，在背景中移动。

有可能吗？

我做错了吗？

添加小提琴

https://jsfiddle.net/bxr53dx4/1/