Transition Overlay: Grain Noise

<style>

@keyframes fadesin {
    0% {
        opacity: 0.2;
    }
    25% {
        opacity: 0.5;
		/*background: url(b.webp) center center / 28%, radial-gradient(#7670b9, #285570);*/

    }
    50% {
        opacity: 0.2;
		background: url(b.webp) center center / 28%;

    }
    100% {
        opacity: 0;
		 pointer-events: none;

    }

}

overlay {
	pointer-events: none;
	background: url(b.webp) center center / 28%,  radial-gradient(#0d0a30, #285570);

	/*url(b.webp),  radial-gradient(#0d093a, #282e70)*/
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1000;
	top: 0;
	left: 0;
	opacity: 50%;
	animation: fadesin 3s;
	animation-fill-mode: forwards;
	}
	
	
</style>

<overlay style="display: flex;     justify-content: center;     align-items: center;">
</overlay>

https://youtu.be/JlBLcLdTYr4?t=19

https://ibb.co/dQjXdKz https://ibb.co/c6hvry5