Effet shadow CSS scroll driven animation

Votre navigateur ne supporte pas cette démonstration

*,*::after,*::before{box-sizing:border-box}	

header{
position: sticky;
top: 0;
display:grid;
place-items:center;
background:white;
z-index:1;
height:5rem;
grid-template-rows: 1fr 1rem;
	
	}
	
header::after {
	
content:'';
display:block;
height: 1rem;
width:100%;
opacity:0;
animation: fondu both linear;
animation-timeline: scroll();
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);  
animation-range: entry 0% exit 50%;
pointer-events: none;
	}	


 @keyframes fondu {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}