Animation texte SVG avec CSS3

🏠Accueil blog » Ressources SVG
Votre navigateur ne prend pas en charge cette démonstration.
Animation texte SVG

✔ Support navigateurs :


<svg width="100%" height="200" viewBox="0 0 960 200">
<defs>
<linearGradient id="demo" x1="100%" x2="0" y1="0" y2="0" gradientUnits="userSpaceOnUse">
<stop stop-color="#e03f7c" offset="0%"/>
<stop stop-color="#51F7FE" offset="100%"/> 
</linearGradient>
</defs>
<text stroke="url(#demo)" x="5%" y="70%" font-size="120"><tspan>Bonne année 2016</tspan></text>
</svg>


text {
fill:transparent;
stroke-width:3;
stroke-dasharray:495;
stroke-dashoffset:495;
animation:anim_demo 5s infinite alternate linear}

@keyframes anim_demo{from{stroke-dashoffset:495}to{stroke-dashoffset:0}} 

👉 Source, inspiration, ressources :

En savoir plus sur la propriété SVG stroke (EN).

Apprendre le SVG sur ce blog.

Voir d'autres démonstrations SVG →