html css Animation Gif

J'ai un .gif jouer l'animation. Il ne tourne pas en boucle et je ne veux pas qu'il la boucle.

J'ai 2 images, ("1 png" et "1 gif animé")

Je veux que chaque fois, quand la souris est sur l'image png, le gif joue.

Mon problème est que lorsque j'ai mis ma souris positon sur l'Image png, le gif jouer une seule fois et s'arrêter. Quand je bouge la souris, puis déplacez en arrière sur l'image, il ne joue pas plus.

Mon code CSS :

#icon{
 float: left;
 width:50px;
 height:50px;
 background: url("images/smal_icon.png") no-repeat scroll 0% 0% transparent;
}
#icon:hover{
float: left;
width:50px;
height:50px;
background: url("images/smal_icon.gif") no-repeat scroll 0% 0% transparent;
}

#icon est un DIV

Parce que c'est mis à jouer qu'une seule fois, ce que vous voulez probablement à faire, c'est ajouter quelque chose à la fin de .gif lorsque vous passez la souris sur le png, de sorte .gif?rnd=12334, cela permettra d'assurer que le gif est re-téléchargé et animer une fois de plus.
pouvez-vous me donner un exemple avec le code que j'ai (j'ai Modifier mon post et de mettre les codes)
utiliser inline GIFs à faire pour un instant l'animation et pas de redownloads.

OriginalL'auteur LeSam | 2013-06-13