Keyframe Animation and Usergroup

Hi there,
I'm having a bit problem with a Keyframe Animation that I wrote in the CSS Selector. Here you go:

Code:

a[href="/u1"] span{color:#F00;animation:svcolor 1s infinite;-moz-animation:svcolor 1s infinite;-webkit-animation:svcolor 1s infinite;}
@keyframes svcolor{10%{color:#F00}20%{color:#F80}30%{color:#FF0}40%{color:#5F0}50%{color:#0F0}60%{color:#0FD}70%{color:#09F}80%{color:#00F}90%{color:#A0F}100%{color:#F0F}}
@-moz-keyframes svcolor{10%{color:#F00}20%{color:#F80}30%{color:#FF0}40%{color:#5F0}50%{color:#0F0}60%{color:#0FD}70%{color:#09F}80%{color:#00F}90%{color:#A0F}100%{color:#F0F}}
@-webkit-keyframes svcolor{10%{color:#F00}20%{color:#F80}30%{color:#FF0}40%{color:#5F0}50%{color:#0F0}60%{color:#0FD}70%{color:#09F}80%{color:#00F}90%{color:#A0F}100%{color:#F0F}}

What it should do: It should make the /u1 name changes like a rainbow, yes it do.
What I want it to do: It currently only applicable to /u and not /g, are there any way to make this work for usergroup rather than just a username? It is really hard if in example I have a usergroup with more than tons of user inside it.

hello @TenzoNakamiXD

you can use this code for usergroup ;

Code:

a span[style="color:#FF0000"] strong {
    background: url(http://i45.servimg.com/u/f45/15/95/60/34/glitte10.gif) no-repeat;
 }

Just select the color group, and add to the code color:#FF0000

new.moon wrote:hello @TenzoNakamiXD

you can use this code for usergroup ;

Code:

a span[style="color:#FF0000"] strong {
    background: url(http://i45.servimg.com/u/f45/15/95/60/34/glitte10.gif) no-repeat;
 }

Just select the color group, and add to the code color:#FF0000

Hi and thanks for replying. But whenever I do that, doesn't that also makes it that whenever I create a post of the same color it'd turn out rainbow too?

Did you change this part for the groups:

Code:

href="/u1"

SLGray wrote:Did you change this part for the groups:

Code:

href="/u1"

Yes I did. I replaced the u1 with g1 and it still doesn't work. No other CSS or JS that isn't comes default with Forumotion is active.

I believe you have to use the full link:

Code:

g1-administrators

@SLGray tried, didn't work.
In my case it was g1-ceo, and it still doesn't work.
It only work with u1 and such.

bump.

Any help?

Uh try this?

Code:

a span[style="color:#XXXXXX"] strong:hover {
    /* YOUR CODE HERE */
}

Change the #XXXXXX to the color of the group.

I have tried both

Code:

a span[style="color:#00FFEA"] strong:hover {
    color:#F00;animation:svcolor 1s infinite;-moz-animation:svcolor 1s infinite;-webkit-animation:svcolor 1s infinite;}
@keyframes svcolor{10%{color:#F00}20%{color:#F80}30%{color:#FF0}40%{color:#5F0}50%{color:#0F0}60%{color:#0FD}70%{color:#09F}80%{color:#00F}90%{color:#A0F}100%{color:#F0F}}
@-moz-keyframes svcolor{10%{color:#F00}20%{color:#F80}30%{color:#FF0}40%{color:#5F0}50%{color:#0F0}60%{color:#0FD}70%{color:#09F}80%{color:#00F}90%{color:#A0F}100%{color:#F0F}}
@-webkit-keyframes svcolor{10%{color:#F00}20%{color:#F80}30%{color:#FF0}40%{color:#5F0}50%{color:#0F0}60%{color:#0FD}70%{color:#09F}80%{color:#00F}90%{color:#A0F}100%{color:#F0F}
}

and

Code:

a span[style="color:#00FFEA"] strong:hover {
    background: url(http://i45.servimg.com/u/f45/15/95/60/34/glitte10.gif) no-repeat;
}

but still doesn't work.

Hi,

Some points :
@ rules shouldn't go inside other rules, this goes for keyframes.
-moz- I highly doubt anyone is using Firefox 16 anymore, so this is hardly needed in my opinion.
-webkit- would be necessary for safari and opera + older versions of chrome

This should work :

Code:

@-webkit-keyframes svcolor {
  10%{color:#F00}
  20%{color:#F80}
  30%{color:#FF0}
  40%{color:#5F0}
  50%{color:#0F0}
  60%{color:#0FD}
  70%{color:#09F}
  80%{color:#00F}
  90%{color:#A0F}
  100%{color:#F0F}
}

@keyframes svcolor {
  10%{color:#F00}
  20%{color:#F80}
  30%{color:#FF0}
  40%{color:#5F0}
  50%{color:#0F0}
  60%{color:#0FD}
  70%{color:#09F}
  80%{color:#00F}
  90%{color:#A0F}
  100%{color:#F0F}
}

a[href^="/u"] span[style="color:#000000"] strong {
  color:#F00;
  -webkit-animation:svcolor 1s infinite;
          animation:svcolor 1s infinite;
}

FYI I spaced it out for the sake of readability.

Replace 000000 by the color of your group, and make sure to disable the following option in CSS.
Display > Colors > CSS stylesheet > Optimize your CSS : No

@Ange Tuteur

Is it possible to add this and create the effect in the chatbox?

Code:

span[data-user="u"] strong {
  -webkit-animation:svcolor 1s infinite;
          animation:svcolor 1s infinite;
}

As long as you include the proper animation properties and values, then yes.