This can be done using CSS keyframes and animation properties. You can ditch that code you have, it's bad.
I rewrote it for you and added some comments:
/* Add this to your custom.css */
/* Example code block, will be wrapped around the user group title */
.memberGroup {
animation: colorForMemberGroup 1s infinite;
}
/*
This is a keyframe, pay attention to the name, it must be used inside the animation property.
You can change the colors using common HEX color codes or RGB,HSL,HSV and CMYK color models.
*/
@keyframes colorForMemberGroup {
0% { color: red; }
50% { color: blue; }
100% { color: red; }
}
Now you can use it like this:
<span class="memberGroup">Member Name</span>
and the name will change its colors from red, blue to red in an infinite loop, as mentioned above, you can change the colors as you desire.
The rotating icons are the easiest thing, we can do it ourselves using CSS but we don't have to! IPS is using FontAwesome which already provides us with various built-in animation classes! In your case, you would want to use `fa-spin` just like this (as you already mentioned in your post above):
<i class="fa fa-newspaper-o fa-spin"></i>
Everything together would look like this:
<span class="memberGroup"><i class="fa fa-newspaper-o fa-spin"></i> Member Name</span>