Colour change auto animation on text

Hi there,

I’m looking to add some code to have some text auto animate through a specific set of colors.

I’m not good with code so hoping someone can help me with the exact code I need to input into the custom code widget.


Hi @Harry_Tuckwell welcome to the Readymag forum. I have attached some code and a guide below.

You’ll need to find the text element’s ‘data-id’ for this to work. I have attached a tutorial link here on how to find your ‘data-id’. You’ll notice in the code it targets the ‘h1’ tag. You can update this to paragraph ‘p’ or another tag such as ‘h2’ or ‘h3’.

If you have say 3 colours you wish to use rather than the 5 I have shown below. You’ll just need to make the percentages divisible into 100 :slight_smile: i.e. 0%, 50%, 100%…

  [data-id="PASTE DATA-ID HERE"]>h1 {
    animation-name: colorchanger;
    animation-duration: 10s; /* Change Duration */
    animation-iteration-count: infinite;
    animation-direction: alternate;

  @keyframes colorchanger {
    0% {
      color: #ee6055;

    25% {
      color: #60d394;

    50% {
      color: #aaf683;

    75% {
      color: #ffd97d;

    100% {
      color: #ff9b85;

Hi, thanks so much for your response.

I’ve tried the code above and not had any luck just yet. Not sure which tag I should use, I’ve tried P, H1, H2, H3 and div with no success. Below is a screenshot of the code for the widget I am trying to animate, if that helps?

Thanks again

Hi @Harry_Tuckwell I suggest giving your text style a tag, you can do this in the text editor.

Unfortunately still not working. Should this code be going into the CSS field of the code widget?

If it’s going straight into the CSS field then you need to remove the <style> </style> tags.

Hey @HEADLESS.HORSE , still no luck unfortunately. Not sure what I’m missing. Here’s a screen shot of the code I’m using. The “Test” text widget has a h1 text style tag attached to it.