Vous avez peut-être remarqué, dans mes derniers articles, des animations qui passaient devant les cadres de texte...
Je ne crois pas avoir indiqué le code de ce genre d'animation et je vais le faire ici...
Ce code sera celui du petit oiseau coloré qui traverse mon article de gauche à droite, mais je n'ai laissé que les codes pour le navigateur Firefox, pour m'y retrouver avant d'être plus complet.
<p class="colibri" style="position: relative; margin: -350px 0px 0px 0px;">
    <img src="http://gifs.toutimages.com/images/ani_oiseaux/petit_oiseau/petit_oiseau_028.gif" />
  </p>
<style type="text/css"><!--
 
      p.colibri {  
        -moz-animation-duration: 6s;  
        -moz-animation-name: perso;
        -moz-animation-iteration-count: infinite;
 -webkit-animation-duration: 6s;  
        -webkit-animation-name: perso;
        -webkit-animation-iteration-count: infinite;
      }  
 
      @-moz-keyframes perso
{
0%   {left:-50px; top:10px;}
10%  {left:0px; top:30px;}
20%  {left:50px; top:50px;}
30%  {left:100px; top:70px;}
40%  {left:200px; top:50px;}
50%  {left:250px; top:60px;}
60%  {left:300px; top:50px;}
70%  {left:400px; top:30px;}
80%  {left:500px; top:20px;}
90%  {left:600px; top:10px;}
100% {left:700px; top:10px;}
}
...  @-webkit-keyframes perso
{
0%   {left:-50px; top:10px;}
10%  {left:0px; top:30px;}
20%  {left:50px; top:50px;}
30%  {left:100px; top:70px;}
40%  {left:200px; top:50px;}
50%  {left:250px; top:60px;}
60%  {left:300px; top:50px;}
70%  {left:400px; top:30px;}
80%  {left:500px; top:20px;}
90%  {left:600px; top:10px;}
100% {left:700px; top:10px;}
}
--></style>

Quelques mots d'explication...
Le paragraphe <p> est défini en nom (class="colibri") pour que les animations s'appliquent à lui et en position relative pour pouvoir être positionné sur le cadre, grâce aux valeurs de margin (haut, droite, bas, gauche).
Les caractéristiques des animations sont définies ensuite: temps, nos animations personnelles (perso) et mouvement infini;  nos animations personnelles (perso) sont précisées ensuite; dans notre exemple, il ne s'agit de que de translations latérale (left) et verticale (top).
Dans cet article, j'ai placé plusieurs animations et, pour cela, j'ai donné un nom à chaque image (ou paragraphe-image) et une liste d'animations personnelles  spécifiques à chacune.
En recopiant cet article pour en faire une page-code, je rajoute un "truc" sur le code, dont j'ai eu besoin sur une publication similaire, bien qu'il fonctionne correctement ici; l'écriture de la translation sous la forme:   {left:50px; top:50px;} peut-être écrite: -moz-translate:(50px, 50px); (ou webkit)