Transformation texte filtres CSS

Le code :

<div class="conteneur">

<span>Text transform</span>

</div>

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

	
.conteneur{

margin: 5rem auto;
font-family:"...";
display: flex;
justify-content: center;
background-color: #000;
filter: contrast(30);
padding: 1rem;
overflow: hidden
}
	
.conteneur span{
  
font-size: 4rem;
hyphens: auto;
color: #fff;
animation: text-transform 4s ease-in-out forwards; 
letter-spacing: -2rem;
}
	
@keyframes text-transform{
  0% {
  
    letter-spacing: -2rem;
    filter: blur(10px);
  }
 
  50% {
    filter: blur(5px);
  }
	
  100% {
    letter-spacing: 1rem;
    filter: blur(2px);
  }
}	

Source, inspiration, ressources :

Source originale.