Il y a peu, lorsque j'ai découvert les possibiltés de certains navigateurs, dont celui que j'utilise le plus, Firefox, j'ai commencé par chercher sur le net un code à recopier, comme je pense beaucoup d'entre nous; j'ai ensuite cherché à en modifier certains paramètres pour en voir les fonctions; j'ai publié un article avec mon essai en précisant que je n'avais pas tout compris ! (ce qui est toujours le cas !)
    Le montage copié est celui d'un carré qui se déplace en changeant de couleur, comme ci-dessus, où j'ai juste rajouté le sportif. Sur cet article publié, les visiteurs ont eu, comme moi, la surprise de constater que la couleur de fond de la zone commentaire suivait l'évolution des couleurs de fond de l'article...ce qui, après réflexion, est assez logique puisque la modification du fond était enregistrée dans le CSS, qui gère tout les paramètres de l'article (n'est-ce pas Tatarinette !).
   Alors, voici la suite pour comprendre le pourquoi de la chose. Sur cet article, la fenêtre commentaire ne devrait pas être modifiée mais je vais noter la façon de faire...ainsi, le paragraphe ci-dessous a une couleur de fond variable; ce pourrait être le cas de la fenêtre commentaire mais je trouve ça limite en facilité d'écriture...?

En reprenant mon article, j'en ai profité pour revoir les codes couleur

Alors, pour partager mes manips, voici ce que j'en ai retenu:
La variation de couleur de fond est attribuée 
-soit à tous les paragraphes de l'article et dans ce cas la fenêtre commentaire en fait partie,
-soit à un ou des paragraphes identifiés (class="..."), comme dans cet article et seuls ceux-ci voient leur couleur de fond modifiée.
Je voudrais aussi aborder les codes pour les couleurs; comme moi, vous avez peut-être hésité à passer de green, blue ou red pour les codes hexadécimaux (#ffff00) ou au RGB (red green blue= rouge, vert bleu) sur lequel il fallait ajouter le pourcentage d'opacité; j'ai essayé avec bonheur les codes rgba, identiques au rgb avec l'opacité dedans ce qui donne: rgba(0,128,128,0.8)= %de rouge, % de vert, % de bleu et valeur opacité:0= transparent et 1= opaque.

Enfin, si cela peut inciter certain(e)s à faire l'essai, le code de mon montage pour Firefox:
<p class="course" style="width: 210px; height: 220px; position: relative; text-align: center; border: 3px solid black; left: 0px; top: 0px;">
    <img src="http://gifs.toutimages.com/images/sports/athletisme/spo_athletisme_152.gif" />
  </p>
<style type="text/css"><!--
 
      p.course
{
-moz-animation: varia 20s linear 1s infinite normal;  
-webkit-animation: varia 20s linear 1s infinite normal;
}

@-moz-keyframes varia /* Firefox */
{
0%   {background:rgba(0,128,128,0.8); left:0px; top:0px;}
10%  {background:rgba(0,0,255,0.8); left:150px; top:0px;}
20%  {background:rgba(0,128,0,0.8); left:300px; top:0px;}
30%  {background:rgba(128,128,0,0.8); left:450px; top:0px;}
40%  {background:rgba(128,0,0,0.8); left:450px; top:100px;}
50%  {background:rgba(255,0,0,0.8); left:450px; top:200px;}
60%  {background:rgba(255,255,0,0.8); left:300px; top:200px;}
70%  {background:rgba(255,128,0,0.8); left:150px; top:200px;}
80%  {background:rgba(255,128,255,0.8); left:0px; top:200px;}
90%  {background:rgba(0,255,255,0.8); left:0px; top:100px;}
100%  {background:rgba(0,128,128,0.8); left:0px; top:0px;}

}
@-webkit-keyframes varia /* Firefox */
{
0%   {background:rgba(0,128,128,0.8); left:0px; top:0px;}
10%  {background:rgba(0,0,255,0.8); left:150px; top:0px;}
20%  {background:rgba(0,128,0,0.8); left:300px; top:0px;}
30%  {background:rgba(128,128,0,0.8); left:450px; top:0px;}
40%  {background:rgba(128,0,0,0.8); left:450px; top:100px;}
50%  {background:rgba(255,0,0,0.8); left:450px; top:200px;}
60%  {background:rgba(255,255,0,0.8); left:300px; top:200px;}
70%  {background:rgba(255,128,0,0.8); left:150px; top:200px;}
80%  {background:rgba(255,128,255,0.8); left:0px; top:200px;}
90%  {background:rgba(0,255,255,0.8); left:0px; top:100px;}
100%  {background:rgba(0,128,128,0.8); left:0px; top:0px;}

}
--></style>