Is it possible to set font by animator CSS?

Hello,

Since Hype does not support flexible gradient Font natively, so I am following this generator at https://www.gradient-animator.com/

and use this css code:

    .css-selector {
    background: linear-gradient(270deg, #ff0000, #ffb60d, #f2ff00, #00ff1c, #00fff1, #0042ff, #ff00cd);
    background-size: 1400% 1400%;

    -webkit-animation: AnimationName 30s ease infinite;
    -moz-animation: AnimationName 30s ease infinite;
    -o-animation: AnimationName 30s ease infinite;
    animation: AnimationName 30s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-o-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

In Hype, I set CSS on the font:

earth_animation_byCSS copy 2.hype.zip (35.7 KB)

and the color on font works, but animation does not work, anyone would like to let me know what did I missed please?

Thanks so much.

Your actual code in the .hype file has an !important after the linear-gradient which appears to be invalid. Remove that, and then uncheck "Protect from external styles" in the Document Inspector.