Как сделать анимацию изменения цветов в animate.css

Question

Я смотрел веб-страницу animate.css, я хочу сделать анимацию изменения цвета, которую они применили в заголовке animate.css на главной странице, как я могу сделай это?

https://daneden.github.io/animate.css/

Answer 1

Использование веб-инспектор, чтобы узнать (правой кнопкой мыши и выберите инспектировать элемент).

Они имеют h1 со следующими определениями стиля:

h1.site__title { 
    color: #f35626; 
    background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;. 
    -webkit-animation: hue 60s infinite linear; 
} 

@-webkit-keyframes hue { 
    from { 
    -webkit-filter: hue-rotate(0deg); 
    } 

    to { 
    -webkit-filter: hue-rotate(-360deg); 
    } 
} 

Answer 2

Попробуйте его

h1 { 
 
    -webkit-background-clip: text; 
 
    -webkit-text-fill-color: transparent; 
 
    -webkit-animation: colored 10s infinite linear; 
 
    background-image: -webkit-linear-gradient(90deg, #f35626, #feab3a); 
 
} 
 
@-webkit-keyframes colored { 
 
    from { 
 
    -webkit-filter: hue-rotate(0deg); 
 
    } 
 
    to { 
 
    -webkit-filter: hue-rotate(-360deg); 
 
    } 
 
}

<h1>Colored text</h1>