Help with applying some CSS to text (rainbow effect/erase on hover)

bawpie

Hi, I've found an example of some css which cycles the background colour through a number of colours.  What I'd like to do is to tweak the code to apply it to text instead in twine. 

This is what I've pasted into the stylesheet node:

.rainbow {
animation: colorchange 50s; /* animation-name followed by duration in seconds*/
/* you could also use milliseconds (ms) or something like 2.5s */
-webkit-animation: colorchange 50s; /* Chrome and Safari */
}

@keyframes colorchange
{
0% {FONT COLOR: red;}
25% {FONT COLOR: yellow;}
50% {FONT COLOR: blue;}
75% {FONT COLOR: green;}
100% {FONT COLOR: red;}
}

@-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
{
0% {FONT COLOR: red;}
25% {FONT COLOR: yellow;}
50% {FONT COLOR: blue;}
75% {FONT COLOR: green;}
100% {FONT COLOR: red;}
}

And in a normal node I've got:

<span class="rainbow">All the colours of the rainbow.</span>

I've also tried Leon's erase text on mouseover css code, but it just causes the entire block of text to disappear as soon as you hover over it so I'm not sure what I'm doing wrong with it.  The example on his blog works fine, so I know it's not the browser.

Again, I have this pasted in the stylesheet:

.erase {
transition: opacity 999s step-end; -webkit-transition: opacity 999s step-end;
}
.erase:hover {
opacity:0;
transition: opacity 1ms; -webkit-transition: opacity 1ms;
}


With this in the node:

<span class="erase">One by one they all fall down.</span>

I do have some other css examples that are working, so so I'm not sure why these aren't?  I've tried them in IE9 and Chrome, and it's the same in both. 

Thanks in advance!

mostly useless

Have you seen Leon's rapid rainbow text on this page?

http://www.glorioustrainwrecks.com/node/5430

Only problem is the text is invisible in Firefox. Anyone know how to fix that?

L

OK, here are the problems I just noticed in the first post:

1) "FONT COLOR" is not a valid CSS keyword. Try "color".

2) My char CSS only works if the final selected element is ".char". So, all instances of ".erase" should be ".erase .char".

mostly wrote:

Only problem is the text is invisible in Firefox. Anyone know how to fix that?

I can't verify this. I'm using FF26 on Windows XP with zero extensions.

bawpie

Thanks, changing 'FONT COLOR' to 'COLOR' has done the trick, thanks! ;D

Re the erase css...I've amended the stylescript to this:

.erase .char {
transition: opacity 999s step-end; -webkit-transition: opacity 999s step-end;
}

.erase .char:hover {
opacity:0;
transition: opacity 1ms; -webkit-transition: opacity 1ms;
}


With a span class of 'erase', it seems to work...sort of.  In the example on your blog, the letters disappear permanently after being hovered over, but here they reappear as soon as I take the mouse pointer away?

Re Leon's rainbow text in firefox, I can confirm it works without any addons (Firefox 26) on Windows 8.