Wie kann ich eine Textfarbe mit CSS animieren?

Wir alle kennen den normalen color Befehl in CSS, damit kann man ja eine Farbe zu einer Klasse zuweisen und somit die Schrift umfärben.

Heute zeige ich euch noch einen anderen Weg wie ihr eine oder mehre Farben einer Schrift zuweisen könnt. Ich habe hier eine Regenbogenfarbe genommen (linear-graient) und habe sie einem Titel Tag als Schriftfarbe zugewiesen und das ganze habe ich dann noch mit keyframes animiert.

Und mit diesem Video und dem passenden Code wisst ihr nun auch wie das geht.

Video

HTML

<h1>Eric Mächler</h1>

CSS

* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background: #340000;
      }

      h1 {
        font-size: 10rem;
        background: linear-gradient(100deg, orange, red, purple, blue, orange);
        background-size: 200% 100%;
        background-clip: text;
        color: transparent;
        animation: animation 3s linear infinite;
      }
      @keyframes animation {
        to {
          background-position: 200% 0;
        }
      }