Как сделать анимацию заливки текста двумя цветами

Question

У меня есть path слова stack, которые я получил с помощью векторного редактора. Я заполнил символы с помощью двухцветного градиента

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="200" viewBox="0 0 600 200">
    <defs>
	  <linearGradient id="Lg" x1="%" y1="0%" x2="100%" y2="0%">
	    <stop offset="0%" stop-color="dodgerblue" />
		<stop offset="100%" stop-color="white" />
		
	   </linearGradient>
	</defs>
  <g fill="url(#Lg)" stroke="skyblue" >
    <path d="m96.5 75.6 8 25.1q-6.5-5.6-11.7-8.6-5.2-3-8.5-3-2.5 0-3.9 1.4-1.4 1.3-1.4 3.7 0 3 3 5.3 3 2.3 9.3 4.3 14 4.3 18.9 8.3 5 4 5 10.4 0 10.2-10.1 16.8-10 6.6-25.8 6.6-8 0-16-2.9-8-3-14.7-8.3v11.3L40.2 120.9q5.8 4.7 11.4 7.3 5.7 2.5 10.3 2.5 5 0 7.7-2.1 2.8-2.1 2.8-5.9 0-3.5-2.2-5.6-2.2-2.1-9.9-4.5-11.2-3.6-16.7-8.4-5.5-4.9-5.5-11.5 0-8.3 7.3-13.6 7.3-5.3 19-5.3 7.7 0 15.1 2.8 7.4 2.8 15.1 8.6zM192.6 74l-22.7 44.4-3-33.9-13.1 51.9 19.9 9.5-42.9-2.3 13.8-4.3-15.7-55.8-4.5 41-9.2-45.4"/>
    <path d="m192.6 74-22.7 44.4-3-33.9-13.1 51.9 19.9 9.5-42.9-2.3 13.8-4.3-15.7-55.8-4.5 41-9.2-45.4z"/>
    <path d="m234.8 106.9-6.5-18.7-6.3 23.1zm37.8 26.9-40.9 12.7 10.5-14-3-10.4-15.2 1.2-4.4 12.1 6.6 5.2-44.4 3.2 10.8-8.1 14.4-56-8.2-5.3 55.1 1.8-12.8 4.6 22.5 50.3z"/>
    <path d="m341 109.9-5 32.5-1.9-13.3q-6.8 8.1-15 12.3-8.2 4.2-17.1 4.2-5.9 0-11.4-2.4-5.5-2.4-10-7-5.3-5.3-8.2-12-2.8-6.7-2.8-13.6 0-9.6 4.1-17.5 4.1-8 11.6-13 5-3.3 10.8-5 5.8-1.6 12.6-1.6 6.1 0 11.4 1.9 5.3 1.9 9.9 5.9l2.7-7.8 4.8 25.6q-3.1-4.5-7.3-6.8-4.2-2.3-9.1-2.3-5.6 0-9 3.3-3.4 3.3-3.4 8.7 0 5.7 4.3 9.6 4.3 3.8 10.7 3.8 3.9 0 8.2-1.4 4.3-1.4 9.2-4.2z"/>
    <path d="m430.7 145.1-37.3-4.5 7.5-4.9-21.7-22.4-2.4 0.5 5.1 24.9 7.9 8.4-47.2-5.3 8.4-6.2 4.5-51-9.1-5.9 37.7-4.6-10.5 8.2 3.1 19.9 16.5-19.7-4.6-5.7 34.4 1.3-24.4 19.6z"/>
  </g>
</svg>

Как сделать анимацию переливания одного цвета в другой?

Answer 1

Анимацию SVG градиента можно сделать несколькими способами:

Изменением атрибута offset, stop-color, изменяя атрибуты X Y

Для горизонтальной анимации градиента изменяем X

<animate attributeName="x1" dur="8s" values="0%;150%;100%;0%" repeatCount="indefinite" />

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="200" viewBox="0 0 600 200">
    <defs>
	  <linearGradient id="Lg" x1="%" y1="0%" x2="0%" y2="0%">
	    <stop offset="0%" stop-color="dodgerblue" />
		<stop offset="90%" stop-color="skyblue" />
		  <animate attributeName="x1" dur="8s" values="0%;150%;100%;0%" repeatCount="indefinite" />
	   </linearGradient>
	</defs>
  <g fill="url(#Lg)" stroke="none" >
    <path d="m96.5 75.6 8 25.1q-6.5-5.6-11.7-8.6-5.2-3-8.5-3-2.5 0-3.9 1.4-1.4 1.3-1.4 3.7 0 3 3 5.3 3 2.3 9.3 4.3 14 4.3 18.9 8.3 5 4 5 10.4 0 10.2-10.1 16.8-10 6.6-25.8 6.6-8 0-16-2.9-8-3-14.7-8.3v11.3L40.2 120.9q5.8 4.7 11.4 7.3 5.7 2.5 10.3 2.5 5 0 7.7-2.1 2.8-2.1 2.8-5.9 0-3.5-2.2-5.6-2.2-2.1-9.9-4.5-11.2-3.6-16.7-8.4-5.5-4.9-5.5-11.5 0-8.3 7.3-13.6 7.3-5.3 19-5.3 7.7 0 15.1 2.8 7.4 2.8 15.1 8.6zM192.6 74l-22.7 44.4-3-33.9-13.1 51.9 19.9 9.5-42.9-2.3 13.8-4.3-15.7-55.8-4.5 41-9.2-45.4"/>
    <path d="m192.6 74-22.7 44.4-3-33.9-13.1 51.9 19.9 9.5-42.9-2.3 13.8-4.3-15.7-55.8-4.5 41-9.2-45.4z"/>
    <path d="m234.8 106.9-6.5-18.7-6.3 23.1zm37.8 26.9-40.9 12.7 10.5-14-3-10.4-15.2 1.2-4.4 12.1 6.6 5.2-44.4 3.2 10.8-8.1 14.4-56-8.2-5.3 55.1 1.8-12.8 4.6 22.5 50.3z"/>
    <path d="m341 109.9-5 32.5-1.9-13.3q-6.8 8.1-15 12.3-8.2 4.2-17.1 4.2-5.9 0-11.4-2.4-5.5-2.4-10-7-5.3-5.3-8.2-12-2.8-6.7-2.8-13.6 0-9.6 4.1-17.5 4.1-8 11.6-13 5-3.3 10.8-5 5.8-1.6 12.6-1.6 6.1 0 11.4 1.9 5.3 1.9 9.9 5.9l2.7-7.8 4.8 25.6q-3.1-4.5-7.3-6.8-4.2-2.3-9.1-2.3-5.6 0-9 3.3-3.4 3.3-3.4 8.7 0 5.7 4.3 9.6 4.3 3.8 10.7 3.8 3.9 0 8.2-1.4 4.3-1.4 9.2-4.2z"/>
    <path d="m430.7 145.1-37.3-4.5 7.5-4.9-21.7-22.4-2.4 0.5 5.1 24.9 7.9 8.4-47.2-5.3 8.4-6.2 4.5-51-9.1-5.9 37.7-4.6-10.5 8.2 3.1 19.9 16.5-19.7-4.6-5.7 34.4 1.3-24.4 19.6z"/> 
	
  </g>
</svg>

Вертикальная анимация градиента

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="200" viewBox="0 0 600 200">
    <defs>
	  <linearGradient id="Lg" x1="%" y1="0%" x2="0%" y2="0%">
	    <stop offset="0%" stop-color="skyblue" />
		<stop offset="100%" stop-color="yellowgreen" />
		  <animate attributeName="y1" dur="4s" values="0%;200%;0%" repeatCount="indefinite" />
	   </linearGradient>
	</defs>
  <g fill="url(#Lg)" stroke="none" >
    <path d="m96.5 75.6 8 25.1q-6.5-5.6-11.7-8.6-5.2-3-8.5-3-2.5 0-3.9 1.4-1.4 1.3-1.4 3.7 0 3 3 5.3 3 2.3 9.3 4.3 14 4.3 18.9 8.3 5 4 5 10.4 0 10.2-10.1 16.8-10 6.6-25.8 6.6-8 0-16-2.9-8-3-14.7-8.3v11.3L40.2 120.9q5.8 4.7 11.4 7.3 5.7 2.5 10.3 2.5 5 0 7.7-2.1 2.8-2.1 2.8-5.9 0-3.5-2.2-5.6-2.2-2.1-9.9-4.5-11.2-3.6-16.7-8.4-5.5-4.9-5.5-11.5 0-8.3 7.3-13.6 7.3-5.3 19-5.3 7.7 0 15.1 2.8 7.4 2.8 15.1 8.6zM192.6 74l-22.7 44.4-3-33.9-13.1 51.9 19.9 9.5-42.9-2.3 13.8-4.3-15.7-55.8-4.5 41-9.2-45.4"/>
    <path d="m192.6 74-22.7 44.4-3-33.9-13.1 51.9 19.9 9.5-42.9-2.3 13.8-4.3-15.7-55.8-4.5 41-9.2-45.4z"/>
    <path d="m234.8 106.9-6.5-18.7-6.3 23.1zm37.8 26.9-40.9 12.7 10.5-14-3-10.4-15.2 1.2-4.4 12.1 6.6 5.2-44.4 3.2 10.8-8.1 14.4-56-8.2-5.3 55.1 1.8-12.8 4.6 22.5 50.3z"/>
    <path d="m341 109.9-5 32.5-1.9-13.3q-6.8 8.1-15 12.3-8.2 4.2-17.1 4.2-5.9 0-11.4-2.4-5.5-2.4-10-7-5.3-5.3-8.2-12-2.8-6.7-2.8-13.6 0-9.6 4.1-17.5 4.1-8 11.6-13 5-3.3 10.8-5 5.8-1.6 12.6-1.6 6.1 0 11.4 1.9 5.3 1.9 9.9 5.9l2.7-7.8 4.8 25.6q-3.1-4.5-7.3-6.8-4.2-2.3-9.1-2.3-5.6 0-9 3.3-3.4 3.3-3.4 8.7 0 5.7 4.3 9.6 4.3 3.8 10.7 3.8 3.9 0 8.2-1.4 4.3-1.4 9.2-4.2z"/>
    <path d="m430.7 145.1-37.3-4.5 7.5-4.9-21.7-22.4-2.4 0.5 5.1 24.9 7.9 8.4-47.2-5.3 8.4-6.2 4.5-51-9.1-5.9 37.7-4.6-10.5 8.2 3.1 19.9 16.5-19.7-4.6-5.7 34.4 1.3-24.4 19.6z"/> 
	
  </g>
</svg>

Диагональная анимация

Анимируем оба атрибута X, Y

<animate attributeName="x1" dur="8s" values="0%;100%;100%;0%" repeatCount="indefinite" /> 
  <animate attributeName="y1" dur="8s" values="0%;100%;100%;0%" repeatCount="indefinite" />

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="200" viewBox="0 0 600 200">
    <defs>
	  <linearGradient id="Lg" x1="%" y1="0%" x2="0%" y2="0%">
	    <stop offset="0%" stop-color="skyblue" />
		<stop offset="100%" stop-color="crimson" />
		  <animate attributeName="x1" dur="8s" values="0%;100%;100%;0%" repeatCount="indefinite" /> 
		    <animate attributeName="y1" dur="8s" values="0%;100%;100%;0%" repeatCount="indefinite" />
	   </linearGradient>
	</defs>
  <g fill="url(#Lg)" stroke="none" >
    <path d="m96.5 75.6 8 25.1q-6.5-5.6-11.7-8.6-5.2-3-8.5-3-2.5 0-3.9 1.4-1.4 1.3-1.4 3.7 0 3 3 5.3 3 2.3 9.3 4.3 14 4.3 18.9 8.3 5 4 5 10.4 0 10.2-10.1 16.8-10 6.6-25.8 6.6-8 0-16-2.9-8-3-14.7-8.3v11.3L40.2 120.9q5.8 4.7 11.4 7.3 5.7 2.5 10.3 2.5 5 0 7.7-2.1 2.8-2.1 2.8-5.9 0-3.5-2.2-5.6-2.2-2.1-9.9-4.5-11.2-3.6-16.7-8.4-5.5-4.9-5.5-11.5 0-8.3 7.3-13.6 7.3-5.3 19-5.3 7.7 0 15.1 2.8 7.4 2.8 15.1 8.6zM192.6 74l-22.7 44.4-3-33.9-13.1 51.9 19.9 9.5-42.9-2.3 13.8-4.3-15.7-55.8-4.5 41-9.2-45.4"/>
    <path d="m192.6 74-22.7 44.4-3-33.9-13.1 51.9 19.9 9.5-42.9-2.3 13.8-4.3-15.7-55.8-4.5 41-9.2-45.4z"/>
    <path d="m234.8 106.9-6.5-18.7-6.3 23.1zm37.8 26.9-40.9 12.7 10.5-14-3-10.4-15.2 1.2-4.4 12.1 6.6 5.2-44.4 3.2 10.8-8.1 14.4-56-8.2-5.3 55.1 1.8-12.8 4.6 22.5 50.3z"/>
    <path d="m341 109.9-5 32.5-1.9-13.3q-6.8 8.1-15 12.3-8.2 4.2-17.1 4.2-5.9 0-11.4-2.4-5.5-2.4-10-7-5.3-5.3-8.2-12-2.8-6.7-2.8-13.6 0-9.6 4.1-17.5 4.1-8 11.6-13 5-3.3 10.8-5 5.8-1.6 12.6-1.6 6.1 0 11.4 1.9 5.3 1.9 9.9 5.9l2.7-7.8 4.8 25.6q-3.1-4.5-7.3-6.8-4.2-2.3-9.1-2.3-5.6 0-9 3.3-3.4 3.3-3.4 8.7 0 5.7 4.3 9.6 4.3 3.8 10.7 3.8 3.9 0 8.2-1.4 4.3-1.4 9.2-4.2z"/>
    <path d="m430.7 145.1-37.3-4.5 7.5-4.9-21.7-22.4-2.4 0.5 5.1 24.9 7.9 8.4-47.2-5.3 8.4-6.2 4.5-51-9.1-5.9 37.7-4.6-10.5 8.2 3.1 19.9 16.5-19.7-4.6-5.7 34.4 1.3-24.4 19.6z"/> 
	
  </g>
</svg>

Update

Диагональный, переходящий в горизонтальный, многоцветный градиент

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="200" viewBox="0 0 600 200">
    <defs>
	  <linearGradient id="Lg" x2="0" y2="0%">
            <stop offset="0%" stop-color="#4c7eaf"></stop>
            <stop offset="25%" stop-color="#4a8eac"></stop>
            <stop offset="50%" stop-color="#AFBE00"></stop>
            <stop offset="75%" stop-color="#53bfac"></stop>
            <stop offset="100%" stop-color="#949494"></stop>
            <animate attributeName="y2" dur="6s" values="0%;100%;100%;0%" repeatCount="indefinite" />
			  <animate attributeName="x2" dur="6s" values="0%;100%;100%;0%;0%" repeatCount="indefinite" />
        </linearGradient>
	</defs>
  <g fill="url(#Lg)" stroke="none" >
    <path d="m96.5 75.6 8 25.1q-6.5-5.6-11.7-8.6-5.2-3-8.5-3-2.5 0-3.9 1.4-1.4 1.3-1.4 3.7 0 3 3 5.3 3 2.3 9.3 4.3 14 4.3 18.9 8.3 5 4 5 10.4 0 10.2-10.1 16.8-10 6.6-25.8 6.6-8 0-16-2.9-8-3-14.7-8.3v11.3L40.2 120.9q5.8 4.7 11.4 7.3 5.7 2.5 10.3 2.5 5 0 7.7-2.1 2.8-2.1 2.8-5.9 0-3.5-2.2-5.6-2.2-2.1-9.9-4.5-11.2-3.6-16.7-8.4-5.5-4.9-5.5-11.5 0-8.3 7.3-13.6 7.3-5.3 19-5.3 7.7 0 15.1 2.8 7.4 2.8 15.1 8.6zM192.6 74l-22.7 44.4-3-33.9-13.1 51.9 19.9 9.5-42.9-2.3 13.8-4.3-15.7-55.8-4.5 41-9.2-45.4"/>
    <path d="m192.6 74-22.7 44.4-3-33.9-13.1 51.9 19.9 9.5-42.9-2.3 13.8-4.3-15.7-55.8-4.5 41-9.2-45.4z"/>
    <path d="m234.8 106.9-6.5-18.7-6.3 23.1zm37.8 26.9-40.9 12.7 10.5-14-3-10.4-15.2 1.2-4.4 12.1 6.6 5.2-44.4 3.2 10.8-8.1 14.4-56-8.2-5.3 55.1 1.8-12.8 4.6 22.5 50.3z"/>
    <path d="m341 109.9-5 32.5-1.9-13.3q-6.8 8.1-15 12.3-8.2 4.2-17.1 4.2-5.9 0-11.4-2.4-5.5-2.4-10-7-5.3-5.3-8.2-12-2.8-6.7-2.8-13.6 0-9.6 4.1-17.5 4.1-8 11.6-13 5-3.3 10.8-5 5.8-1.6 12.6-1.6 6.1 0 11.4 1.9 5.3 1.9 9.9 5.9l2.7-7.8 4.8 25.6q-3.1-4.5-7.3-6.8-4.2-2.3-9.1-2.3-5.6 0-9 3.3-3.4 3.3-3.4 8.7 0 5.7 4.3 9.6 4.3 3.8 10.7 3.8 3.9 0 8.2-1.4 4.3-1.4 9.2-4.2z"/>
    <path d="m430.7 145.1-37.3-4.5 7.5-4.9-21.7-22.4-2.4 0.5 5.1 24.9 7.9 8.4-47.2-5.3 8.4-6.2 4.5-51-9.1-5.9 37.7-4.6-10.5 8.2 3.1 19.9 16.5-19.7-4.6-5.7 34.4 1.3-24.4 19.6z"/> 
	
  </g>
</svg>

Answer 2

Как однажды @Stranger in the Q выразился: "Не в точности, но по мотивам®" =)

Вариант на CSS

Агрессивный вариант:

h1 {
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  font-weight: 900;
  text-align: center;
  font-size: 20vw;
  line-height: 90vh;
  font-family: arial, sans-serif;
  background: linear-gradient(to left, blue, red, green, yellow, chocolate, brown);
  background-size: 1000px 100%;
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: background 20s linear infinite;
}

@keyframes background {
  0% {
    background-position: 0;
  }
  100% {
    background-position: 10000px;
  }
}

<h1>Stack</h1>

Спокойный вариант:

h1 {
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  font-weight: 900;
  text-align: center;
  font-size: 20vw;
  line-height: 90vh;
  font-family: arial, sans-serif;
  background: linear-gradient(45deg, lightgreen, aliceblue, cornflowerblue);
  background-size: auto 500%;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: background 10s ease infinite;
  background-position: center 100%;
}

@keyframes background {
  from {
    background-position: center 0;
  }
  50% {
    background-position: center 100%;
  }
  to {
    background-position: center 0;
  }
}

<h1>Stack</h1>

Вариант с однотипной анимацией для каждой буквы отдельно:

@import url('https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap');
h1 {
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  font-weight: 900;
  text-align: center;
  font-size: 20vw;
  line-height: 90vh;
  font-family: 'Rubik Mono One', sans-serif;
}

h1>span {
  background: linear-gradient(to left, brown, red, green, yellow, chocolate, brown);
  background-size: 100% 1000px;
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: background 20s linear infinite;
}

@keyframes background {
  0% {
    background-position: 0;
  }
  100% {
    background-position: 2000px;
  }
}

<h1><span>S</span><span>t</span><span>a</span><span>c</span><span>k</span></h1>

Вариант с индивидуальной для каждой буквы анимацией:

@import url('https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap');
h1 {
  position: relative;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  font-weight: 900;
  text-align: left;
  font-size: 20vw;
  line-height: 90vh;
  font-family: 'Rubik Mono One', sans-serif;
  color: white;
}

h1>span {
  opacity: 0;
}

h1>span:nth-child(1) {
  background: linear-gradient(to left, brown, red, green, yellow, chocolate, brown);
  animation: fade 2s linear 0s forwards, background 30s linear infinite;
}

h1>span:nth-child(2) {
  background: linear-gradient(to left, darkorange, deeppink, lavender, fuchsia, sienna, darkorange);
  animation: fade 2s linear 2s forwards, background 30s linear infinite;
}

h1>span:nth-child(3) {
  background: linear-gradient(to left, gray, thistle, white, black, lightgray, gray);
  animation: fade 2s linear 4s forwards, background 30s linear infinite;
}

h1>span:nth-child(4) {
  background: linear-gradient(to left, aqua, antiquewhite, cadetblue, chartreuse, crimson, aqua);
  animation: fade 2s linear 6s forwards, background 30s linear infinite;
}

h1>span:nth-child(5) {
  background: linear-gradient(to left, blue, yellow, springgreen, sandybrown, purple, blue);
  animation: fade 2s linear 8s forwards, background 30s linear infinite;
}

h1>span:nth-child(1),
h1>span:nth-child(2),
h1>span:nth-child(3),
h1>span:nth-child(4),
h1>span:nth-child(5) {
  background-size: 200% 200%;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes background {
  0% {
    background-position: 0;
    background-size: 100% 1000px;
  }
  100% {
    background-position: 2000px;
    background-size: 100% 1000px;
  }
}

<h1><span>S</span><span>t</span><span>a</span><span>c</span><span>k</span></h1>

Вариант а-ля 3DFire :)

@import url('https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap');
h1 {
  position: relative;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  font-weight: 900;
  text-align: left;
  font-size: 20vw;
  line-height: 90vh;
  font-family: 'Rubik Mono One', sans-serif;
  color: white;
}

h2 {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  font-weight: 900;
  text-align: left;
  font-size: 20vw;
  line-height: 90vh;
  font-family: 'Rubik Mono One', sans-serif;
  color: white;
  background: linear-gradient(45deg, lightgreen, aliceblue, cornflowerblue);
  background-size: auto 500%;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: background_h 5s ease infinite;
  background-position: center 100%;
}

h1>span {
  opacity: 0;
}

h1>span:nth-child(1) {
  background: linear-gradient(to left, brown, red, green, yellow, chocolate, brown);
  animation: fade 2s linear 0s forwards, background 20s linear infinite;
}

h1>span:nth-child(2) {
  background: linear-gradient(to left, darkorange, deeppink, lavender, fuchsia, sienna, darkorange);
  animation: fade 2s linear 1s forwards, background 20s linear infinite;
}

h1>span:nth-child(3) {
  background: linear-gradient(to left, gray, thistle, white, black, lightgray, gray);
  animation: fade 2s linear 2s forwards, background 20s linear infinite;
}

h1>span:nth-child(4) {
  background: linear-gradient(to left, aqua, antiquewhite, cadetblue, chartreuse, crimson, aqua);
  animation: fade 2s linear 3s forwards, background 20s linear infinite;
}

h1>span:nth-child(5) {
  background: linear-gradient(to left, blue, yellow, springgreen, sandybrown, purple, blue);
  animation: fade 2s linear 4s forwards, background 20s linear infinite;
}

h1>span:nth-child(1),
h1>span:nth-child(2),
h1>span:nth-child(3),
h1>span:nth-child(4),
h1>span:nth-child(5) {
  background-size: 200% 200%;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes background {
  0% {
    background-position: 0;
    background-size: 100% 1000px;
  }
  100% {
    background-position: 2000px;
    background-size: 100% 1000px;
  }
}

@keyframes background_h {
  from {
    background-position: center 0;
  }
  50% {
    background-position: center 100%;
  }
  to {
    background-position: center 0;
  }
}

<h1><span>S</span><span>t</span><span>a</span><span>c</span><span>k</span>
  <h2>Stack</h2>
</h1>

Продолжение следует...

Answer 3

SVG другим способом анимации

<svg xmlns="http://www.w3.org/2000/svg" width="600" viewBox="0 0 600 200">
    <defs>
	  <linearGradient id="lg">
	    <stop offset="0%" stop-color="gold" >
        <animate dur="12s" attributeName="offset" values="0;0.5;1;0.3;0.1;1" repeatCount="indefinite"/>
      </stop>
		  <stop offset="100%" stop-color="orange" >
       <animate dur="2s" attributeName="offset" values="0.3;0.2;0.4;1;0.4;0" repeatCount="indefinite"/>
      </stop>
	   </linearGradient>
    <clipPath id="cp">
    <path d="m96.5 75.6 8 25.1q-6.5-5.6-11.7-8.6-5.2-3-8.5-3-2.5 0-3.9 1.4-1.4 1.3-1.4 3.7 0 3 3 5.3 3 2.3 9.3 4.3 14 4.3 18.9 8.3 5 4 5 10.4 0 10.2-10.1 16.8-10 6.6-25.8 6.6-8 0-16-2.9-8-3-14.7-8.3v11.3L40.2 120.9q5.8 4.7 11.4 7.3 5.7 2.5 10.3 2.5 5 0 7.7-2.1 2.8-2.1 2.8-5.9 0-3.5-2.2-5.6-2.2-2.1-9.9-4.5-11.2-3.6-16.7-8.4-5.5-4.9-5.5-11.5 0-8.3 7.3-13.6 7.3-5.3 19-5.3 7.7 0 15.1 2.8 7.4 2.8 15.1 8.6zM192.6 74l-22.7 44.4-3-33.9-13.1 51.9 19.9 9.5-42.9-2.3 13.8-4.3-15.7-55.8-4.5 41-9.2-45.4"/>
    <path d="m192.6 74-22.7 44.4-3-33.9-13.1 51.9 19.9 9.5-42.9-2.3 13.8-4.3-15.7-55.8-4.5 41-9.2-45.4z"/>
    <path d="m234.8 106.9-6.5-18.7-6.3 23.1zm37.8 26.9-40.9 12.7 10.5-14-3-10.4-15.2 1.2-4.4 12.1 6.6 5.2-44.4 3.2 10.8-8.1 14.4-56-8.2-5.3 55.1 1.8-12.8 4.6 22.5 50.3z"/>
    <path d="m341 109.9-5 32.5-1.9-13.3q-6.8 8.1-15 12.3-8.2 4.2-17.1 4.2-5.9 0-11.4-2.4-5.5-2.4-10-7-5.3-5.3-8.2-12-2.8-6.7-2.8-13.6 0-9.6 4.1-17.5 4.1-8 11.6-13 5-3.3 10.8-5 5.8-1.6 12.6-1.6 6.1 0 11.4 1.9 5.3 1.9 9.9 5.9l2.7-7.8 4.8 25.6q-3.1-4.5-7.3-6.8-4.2-2.3-9.1-2.3-5.6 0-9 3.3-3.4 3.3-3.4 8.7 0 5.7 4.3 9.6 4.3 3.8 10.7 3.8 3.9 0 8.2-1.4 4.3-1.4 9.2-4.2z"/>
    <path d="m430.7 145.1-37.3-4.5 7.5-4.9-21.7-22.4-2.4 0.5 5.1 24.9 7.9 8.4-47.2-5.3 8.4-6.2 4.5-51-9.1-5.9 37.7-4.6-10.5 8.2 3.1 19.9 16.5-19.7-4.6-5.7 34.4 1.3-24.4 19.6z"/>
</clipPath>
</defs>
<rect width="600" height="200" clip-path="url(#cp)" fill="url(#lg)"></rect>
</svg>

Второй вариант с анимацией градиента stroke

<link href="https://fonts.googleapis.com/css?family=Aclonica&display=swap" rel="stylesheet"> 

<svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style>
      text{
        text-transform: uppercase;
        font-weight: 900;
        font-family: 'Aclonica', sans-serif;
        font-size: 60px;
        fill: none;
        stroke: url(#lg);
        stroke-width: 6;
      }
    </style>
    <radialGradient id="lg" cx="20%" cy="30%">
      <stop offset="30%" stop-color="red"/>
      <stop offset="70%" stop-color="orange"/>
      
      <animate attributeName="cx" 
               dur="6s"
               begin="0s"
               repeatCount="indefinite"
               values="20%; 0%; 50%; 100%; 0%; 20%;100%; 20%"/>
          <animate attributeName="cy" 
               dur="6s"
               begin="0s"
               repeatCount="indefinite"
               values="60%; 0%; 50%; 100%; 0%; 50%; 100%;0%; 20%"/>
    </radialGradient>
  </defs>
  <g>
    <text x="0" y="100">s</text>
    <text x="47" y="100">t</text>
    <text x="90" y="100">a</text>
    <text x="140" y="100">c</text>
    <text x="190" y="100">k</text>
  </g>
</svg>

Пример с блинк эффектом

<link href="https://fonts.googleapis.com/css?family=Aclonica&display=swap" rel="stylesheet">

<svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style>
      text{
        text-transform: uppercase;
        font-weight: 900;
        font-family: 'Aclonica', sans-serif;
        font-size: 60px;
        fill: none;
        stroke: url(#lg);
        stroke-width: 6;
      }
    </style>
    <radialGradient id="lg" cx="20%" cy="30%">
      <stop offset="30%" stop-color="red"/>
      <stop offset="70%" stop-color="orange"/>
      
      <animate attributeName="cx" 
               dur="6s"
               begin="0s"
               repeatCount="indefinite"
               values="20%; 0%; 50%; 100%; 0%; 20%;100%; 20%"/>
          <animate attributeName="cy" 
               dur="6s"
               begin="0s"
               repeatCount="indefinite"
               values="60%; 0%; 50%; 100%; 0%; 50%; 100%;0%; 20%"/>
    </radialGradient>
  </defs>
  <g>
    <text x="0" y="100">s
     <animate attributeName="y"
              dur="0.3s"
              begin="0s"
              repeatCount="2"
              values="90; 105; 100"
              fill="freeze"
              id="p1"/>
    </text>
    <text x="47" y="100">t
     <animate attributeName="y"
              dur="0.3s"
              begin="p1.end"
              repeatCount="2"
              values="90; 105; 100"
              fill="freeze"
              id="p2"/>    
    </text>
    <text x="90" y="100">a
      <animate attributeName="y"
              dur="0.3s"
              begin="p2.end"
              repeatCount="2"
              values="90; 105; 100"
              fill="freeze"
              id="p3"/>      
    </text>
    <text x="140" y="100">c
      <animate attributeName="y"
              dur="0.3s"
              begin="p3.end"
              repeatCount="2"
              values="90; 105; 100"
              fill="freeze"
              id="p4"/>       
    </text>
    <text x="190" y="100">k
      <animate attributeName="y"
              dur="0.3s"
              begin="p4.end"
              repeatCount="2"
              values="90; 105; 100"
              fill="freeze"/>       
    </text>
  </g>
</svg>

Answer 4

Скромненько, без чудес... (Пока, только Chrome):

@import url("https://fonts.googleapis.com/css?family=Rubik+Mono+One&display=swap");
body { margin: 0; height: 100vh; background: radial-gradient(at center, #fefefe, #024679); }

h1 {
  margin: 0;
  font: 140px/1em "Rubik Mono One", sans-serif;
  text-align: center;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 6px #eee;
  background-image: linear-gradient(90deg, transparent, white, transparent),
    linear-gradient(90deg, transparent 5px, #f48024 5px, #f48024 10px),
    linear-gradient(270deg, transparent 4px, #f48024 5px, #f48024 10px);
  background-size: 1em 1em, 10px 0, 10px 0;
  background-repeat: no-repeat no-repeat, repeat no-repeat, repeat no-repeat;
  background-position: -20% 0, 0 11%, 0 81%;
  background-blend-mode: color-burn, screen, screen;
  -webkit-filter: drop-shadow(0 0 20px white) drop-shadow(0 0 8px white);
  filter: drop-shadow(0 0 20px white) drop-shadow(0 0 8px white);
  animation: orange_lines 3s ease-out infinite alternate,
    blink 2s ease-in-out infinite alternate;
}
@keyframes orange_lines {
  to {
    background-size: 1em 1em, 10px 100%, 10px 100%;
    -webkit-filter: drop-shadow(1px 2px 1px black) drop-shadow(0 0 3px black);
    filter: drop-shadow(1px 2px 1px black) drop-shadow(0 0 3px black);
    -webkit-text-stroke: 6px #bcbbbb;
  }
}
@keyframes blink { to { background-position: 120% 0, 0 11%, 0 81%; } }

<h1>STACK</h1>

БЛОГ НА HUSL

Как сделать анимацию заливки текста двумя цветами

Ответы (4 шт):