Haut de page CSS Scroll-driven animations

• animation-timeline
• animation-range
• @keyframes

Votre navigateur ne supporte pas cette démonstration

Si la démonstration ne fonctionne pas, activez la fonctionnalité : #enable-experimental-web-platform-features via le drapeau chrome://flags.

<a href="#" class="haut"></a>

@keyframes haut-page {
  0% {
    opacity: 0;
  
  }
 
  100% {
    opacity: 1;
   
  }
}


.haut {
	
opacity:0;
position:fixed;
bottom:5rem;
right:2rem;
display:flex; 
width: 60px;
aspect-ratio: 1;
background-color: #6753ea;
border-radius: .875rem;
animation:auto haut-page linear both;
animation-timeline: scroll();
animation-range: entry 25% cover 50%
	
}
	

	
.haut::before {
	
border-style: solid;
border-color: white;
border-width: 0.25em 0.25em 0 0;
content: '';
width: 1em;
height: 1em;
position: absolute;
top:0;
left:0;
bottom:0;
right:0;
/*inset:0*/
margin:auto;
transform: rotate(-45deg);

}