Is it possible to do CSS animation of a rainbow colored text?

  • Unknown's avatar
    tuangstudio · Member ·

    Hey There!

    I’m curious if my WordPress site with a theme Dalston possible to have rainbow text animated. And I’m talking about the menu text on the top of the page.

    I have successfully changed the tagline of the page to be rainbow and customized many other parts of the site by using CSS but I have no success on animated the text or even changed the color of that menu into a rainbow I want.

    I have tried this https://w3bits.com/rainbow-text/
    and this https://stackoverflow.com/questions/54702124/rainbow-text-animation-using-only-css

    But maybe I have missed something or called the wrong element. Please advice.

    Here’s my site: http://www.tuangstudio.com and hosted by WordPress.

    Thanks in advance!!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    slantedplanet · Member ·

    Hello!

    Yes, it is possible to style menu text with a rainbow animation in the Dalston theme. I have this code working on the main menu of your site: 

    
.main-navigation a:link, .main-navigation a:visited {
	background-image: repeating-linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);
	background-clip: text;
	color: transparent;
}

    This CSS is adapted from the first resource you cited in your original post. The animation is gradual enough to be less obvious. I chose to apply the gradient over all of the menu text, as opposed to attempting to apply it to each menu item. The look is not a likely final solution as the text-background contrast is poor with certain colors in the rainbow gradient.

    It could be a starting point for additional customization.

    If you want more help, this might be a good opportunity to take advantage of the live chat support available with your WordPress.com plan to connect with a Happiness Engineer.

    If you revise the code above or find something else that works better for you, I hope you will post again to share your solution. Good luck!

  • Unknown's avatar
    tuangstudio · Member ·

    Hey Thanks, @drizzleblacks !
    But it did not work. I copied your code to see the result but I only got the rainbow background over my text. I can’t see the text menu and the rainbow also does not animated. I wish I can attach a screenshot here for you.

    Also, I know I have live chat but with somehow it keeps bringing me to email the people not to live chat @_@”

    But anyway thank you so much for helping. I hope you know why I still can’t make it happen.

  • Unknown's avatar
    slantedplanet · Member ·

    Hello again @tuangstudio!

    Thanks for your post! Before CSS, I have two brief responses to other topics you mention in your follow up.

    First, there is no queue for live chat support. If someone is not available, you go to email. Email or chat, you are working with WordPress.com staff who can see all of your CSS, unlike we volunteers.

    Second, snipboard.io is a popular utility for sharing screenshots.

    Now on to the CSS.

    I went back to the rainbow text tutorial that you linked-to in your original post, and I also watched the accompanying animation demo which–in my opinion–produces a very different effect than the tutorial example. My prior CSS was going for the look in the tutorial. (And I omitted the animation part by mistake. Apologies! It looked better to me without animation.)

    So now I have reproduced the animation demo example on your menu text with this CSS:

    .main-navigation a:link, .main-navigation a:visited {
	background-clip: text;
	background-image: repeating-linear-gradient(60deg, violet, indigo, blue, green, yellow, orange, red);
	background-size: 800%;
	color: transparent;
  
	animation-name: menuTextRainbowRotation;
  	animation-direction: normal;
	animation-duration: 24s;
	animation-fill-mode: none;
	animation-iteration-count: infinite;
	animation-play-state: running;
	animation-timing-function: ease;
}

@keyframes menuTextRainbowRotation {
    0%{background-position:0% 50%}
    50%{background-position:100% 25%}
    100%{background-position:0% 50%}
}

    I set the animation-duration value to be half the speed of the animation demo as a personal preference. Faster seems like it might be a potentially seizure-inducing sort of visual effect, as well as annoying. You can easily adjust that setting to your preference if you see it differently.

    Good luck! Please let us know if this works for you.

  • Unknown's avatar
    slantedplanet · Member ·

    I just remembered that I also modified the degree value in the repeating linear gradient settings as in:

    background-image: repeating-linear-gradient(60deg, violet, indigo, blue, green, yellow, orange, red);

    In the animation demo, the value is 45 degrees instead of 60 degrees.

    This is another setting that changes the appearance of the rainbow effect.

  • Unknown's avatar
    tuangstudio · Member ·

    Ok now I got the animation to works but the same issue is still occur. The text is under missing and I assume it’s hidden under the rainbow rectangles that appears at the same location.

  • Unknown's avatar
    tuangstudio · Member ·

    Oh and I also have contacted the support team last night and the email says they will get back in 24 hours. Thanks again for the help.

  • Unknown's avatar
    slantedplanet · Member ·

    Hello again!

    Thanks for your follow up post. I discovered that Chrome still needs a prefix for background-clip.

    Add this line:

    -webkit-background-clip: text;

    above this line:

    background-clip: text;

    Or copy-and-paste this revised version:

    .main-navigation a:link, .main-navigation a:visited {
	-webkit-background-clip: text;
	background-clip: text;
	background-image: repeating-linear-gradient(60deg, violet, indigo, blue, green, yellow, orange, red);
	background-size: 800%;
	color: transparent;
  
	animation-name: menuTextRainbowRotation;
  	animation-direction: normal;
	animation-duration: 24s;
	animation-fill-mode: none;
	animation-iteration-count: infinite;
	animation-play-state: running;
	animation-timing-function: ease;
}

@keyframes menuTextRainbowRotation {
    0%{background-position:0% 50%}
    50%{background-position:100% 25%}
    100%{background-position:0% 50%}
}

    If you are wondering why I didn’t have the problem too, I mostly work and test in Firefox. Firefox does not require a prefix for any of the CSS we need.

    screenshot from testing with Chrome

    Please let us know if this works for you.

  • Unknown's avatar
    tuangstudio · Member ·

    Thank you, slantedplanet!

    I am finally able to make this wonderful rainbow from your sample code. I appreciate your kindness and help.

    Oh! and by the way, the official support team replied back and say that CSS support is not what they do and beyond what they offer for helping.

    I guess I’m very lucky to have you helping me here.

    Thank you very very much :)

  • The topic ‘Is it possible to do CSS animation of a rainbow colored text?’ is closed to new replies.