Animation css3

Bonjour,

Alors voila j'ai suivie le tuto sur le site pour les animations css3 et j'ai réalisé ce template :

http://www.team-rushkiller.fr/

Donc déjà l'animation ne fonction pas sous ie/fox/safari mai le truc qui me gène vraiment c'est que l'animation ce décale si la résolution et plus élevé et inversement "je la cache en responsive a partir de 800px".

Dons je ne vois pas quoi faire pour réglé ce souci le jqueri peut être ? mai je ne connait pas.

Voici la syntaxe utilisé :

#logo{
     width:915px;
     height:71px;
     margin:0 auto;
     margin-bottom:20px;
     background:url(images/BF4_logoWht.png) center no-repeat;   
         -moz-animation-name: 'logo'; /* nom de l'animation */
         -moz-animation-duration: 2s; /* temps de l'animation (4s) */
     -ms-animation-name: 'logo'; /* nom de l'animation */
         -ms-animation-duration: 2s; /* temps de l'animation (4s) */
     -o-animation-name: 'logo'; /* nom de l'animation */
         -o-animation-duration: 2s; /* temps de l'animation (4s) */
         -webkit-animation-name: 'logo'; /* nom de l'animation */
         -webkit-animation-duration: 2s; /* temps de l'animation (4s) */
         /*animation-iteration-count: infinite; /* nombre de boucles (infinie) */
         /*-webkit-animation-timing-function: linear; /* accelération de l'animation (constant) */   
}

@-o-keyframes logo{
     0% {margin-left:100%;}
     100%{margin-left:217px;}
}
@-ms-keyframes logo{
     0% {margin-left:100%;}
     100%{margin-left:217px;}
}
@-moz-keyframes logo{
     0% {margin-left:100%;}
     100%{margin-left:217px;}
}
@-webkit-keyframes logo{
     0% {margin-left:100%;}
     100%{margin-left:217px;}
}

J'espère que vous trouverez une astuce et vous en remercie d'avance :) .