SVG : animation d'un texte SVG avec CSS

Animez le SVG avec CSS !

Le code SVG

<svg width="100%" height="auto" viewBox ="0 0 900 100" > <text x ='100' y ='60' width = '600' height = '60' >Animez le SVG avec CSS !</text> </svg>

Le code CSS

    
	svg{background : linear-gradient( 75deg, navy, aqua,white );}
	text{font-family : arial ; font-weight : bold ;	font-size : 60px ;  text-shadow : 5px 5px 5px grey ;fill : navy; }
	@keyframes deplace
	{ 
		0% {transform:translateX(-900px); }
		50%{transform : translateX(0px);}
		100% {transform : translateX(900px);}
	}
	text{animation : deplace 10s 0s infinite linear alternate;}

La balise SVG est un élémént HTML a qui on peut appliquer un dégradé linéaire CSS.

Le texte change de direction car dans la propriété animation il y a le paramètre alternate.
Retour menu