Animate.css color animation

gistfile1.html

<!-- example: https://jsfiddle.net/Ariex/ouoq0jbw/ -->
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:400,100,400italic,700italic,700&type=.css">
<style>
@keyframes hue {
    from {
        filter: hue-rotate(0deg);
        -webkit-filter: hue-rotate(0deg);
    }
    to {
        filter: hue-rotate(-360deg);
        -webkit-filter: hue-rotate(-360deg);
    }
}
h1 {
    font: 100%/1.5"Roboto", "Times New Roman";
    -webkit-font-smoothing: antialiased;
    font-size: 96px;
    font-weight: 100;
    background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
    /* due to FF does not support background-clip: text as well as chrome, the gradient should not apply on FF  */
    animation: hue 10s infinite linear;
    color: #f35626;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
</style>
<h1>This is a Test</h1>