Hover over a userstyle link on this site - the link will fade-in to a color based on its rating!
__________________
| green = good
| yellow = OK
| gray = no rating
| red = bad
'------------------
If you want the colors to show up all the time, instead of mousing over them, delete all instances of ":hover" in the code (like I did when I made the screenshot).

To adjust the fade-in / fade-out timing, modify the number with an "s" after it: .5s = one-half of a second.
Change the "ease-out .5s;" number to set the fade-out length. (It triggers when you're NOT hovering over it, i.e. when you move the cursor away.) Try "ease-out 2s;" and the links will take 2 full seconds to fade out.

Tested on, and written for, Google Chrome and Firefox*. Probably works on Safari.

*colors WILL work on Firefox 3.6 and earlier versions, but the CSS transitions won't.

UPDATE: The style lists should now have less spacing in between them; the non-style links are excluded from the colorin