Growing "blast" of light animation from center of page - css

Question

Using CSS I'd like to animate a radial-gradient circle to expand the full length and width of the page (to fully white) and then reverse this animation (return to original state). This should look like a gradual "blast" of white from the center and fade to fully white once reaching full width/height, however my white background starts transitioning too early. How do I achieve this?
scss
.container {
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
background: black;
height: 100vh;
}
.flash-container {
animation: grow 5s 2s linear forwards;
width: 20px;
height: 20px;
z-index: 4;
#flash {
background: radial-gradient(circle, white, transparent 10%);
width: 100%;
height: 100%;
position: absolute;
border-radius: 100%;
}
}
#keyframes grow {
to {
transform: scale(1000);
background: white;
}
}
html
<div class="container">
<div class="flash-container">
<div class="flash"></div>
</div>
</div>
Jsfiddle: https://jsfiddle.net/zv3bmw8j/2/

Answer 1

I updated your CSS to use the box-shadow method as I quoted above. This would need more tweaks to do as it was being built on a hover method. Just change the percentage value from 0% - 100% and you should be solid. I also made a change to the HTML format and removed the inner flash div.
https://jsfiddle.net/q9n6adLp/
.flash-container {
animation: grow 5s 2s linear forwards;
width: 20px;
height: 20px;
z-index: 4;
margin: 0 auto;
box-shadow: 0 0 30vw 40vw rgba(241,244,0,1);
.flash {
background: radial-gradient(circle, white, transparent 10%);
width: 100%;
height: 100%;
position: absolute;
border-radius: 100%;
}
}