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



















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

Ответ
Как однажды @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
}
}

Stack

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


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
}
}

Stack

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


@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
}
}

Stack

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


@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
}
}

Stack

Вариант а-ля 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
}
}

Stack
Stack

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