#serpent {
    text-align: center;
    font-style: italic;
    font-size: 18px;
    
}

#serpent a {
color: black;
padding: 20px 10px 10px 95px;
background: #F5F6CE url(../img/serpent.png) no-repeat 5px 10px;
}

/* première étape */
#serpent a, #serpent a:hover, #serpent a:focus {
animation-name: serpent; /* nom de l'animation */
animation-duration: 4s; /* temps de l'animation (4s) */
animation-iteration-count: infinite; /* nombre de boucles (infinie) */
animation-timing-function: linear; /* accelération de l'animation (constant) */
}
/* deuxième étape */

@-moz-keyframes serpent {   
0% {background:#F5F6CE url(../img/serpent.png) no-repeat 5px 10px;}
50% {background:#F5F6CE url(../img/serpent.png) no-repeat 40px 10px;}
100% {background:#F5F6CE url(../img/serpent.png) no-repeat 5px 10px;}
}

@-webkit-keyframes serpent {    
0% {background:#F5F6CE url(../img/serpent.png) no-repeat 5px 10px;}
50% {background:#F5F6CE url(../img/serpent.png) no-repeat 40px 10px;}
100% {background:#F5F6CE url(../img/serpent.png) no-repeat 5px 10px;}
}

 /*   a l'heure actuel
    -moz- pour Gecko (Mozilla)
    -webkit- pour Webkit (Chrome, Safari, Android...)
    -ms- pour Microsoft (Internet Explorer)
    -khtml- pour KHTML (Konqueror) 
	-o- pour Opera  
	mais @keyframe suffit pour Firefox , bientôt les autres aussi
	donc un seul @keyframe suffira pur tous.
*/