CSS BACKGROUND GRADIENT

Warum läst der sich nicht animiren??

sobald ich die animation wieder rein komentiere habe ich nur ein background bild was sich animiert. aber ich will das die schrift so animiert ist .. ich glaube ihr versteht es wenn man es sieht

https://jsfiddle.net/basti1012/7gwau965/1/

ist ja interesant das es als image geht . wo ist da den der unterschied ob ich den gradient als background oder background-image nehmen. gut es läst sich animieren wie wir jetzt sehen ,aber hat das irgendwie noch andere auswirkungen bzw vor und nachteile??

EDIT: mal nee ganz blöde frage zwischen durch. ist es möglich die buchstaben einen border zu geben . also nicht runterrum als quadrat .ich meine in der form des buchstabens?? ist wahrscheinlich nur mit canvas oder einer anderen bibiliothek möglich oder weiss einer da einen css weg oder so??

Kann man schrift eigentlich auch reponsiv machen ?? versuche gerade diese schrift in meiner ersten hp seite einzubauen ,aber irgendwie will die schrift nicht .die bleibt immer gleich gross auch wenn ich font.size mit prozente fütter.

gibst da irgendein css befehl für reponsive schrift

EDIT hat sich erledigt. mit grössen angabe "VW" geht es komischer weise aber mit prozente nicht .. das verstehe ich wohl nie

ich habe aber versucht bei diesen scripit den buchstaben zu spielen. also ich meine ich wollte die schrift im form eines regenbogen machen. dafür habe ich jeden buchstaben in ein <p> gepackt und die höhe dazu verändert . aber das doofe ist die buchstaben sind dann weg . man sieht die buchstaben nur noch wenn man sie selectiert. wieso ist das so ? kann man das ändern das es so geht wie ich es möchte ??

https://jsfiddle.net/basti1012/vk1up16y/3/

den text sieht man wenn man selectiert. ganz merkwürdig,den effekt verstehe ichnicht weil der text ist ja da ohne gradient