CSS3 animation avec des images clés ne fonctionne pas sous firefox et IE

Mon code css fonctionne dans chrome et safari mais pas sur Firefox, IE et Opera.
lorsque je crée @keyframes tourner {} , pour les autres navigateurs, ce n'est pas travaillé
c'est que pour ce 4 ligne:
animation-duration: 4s;

animation-timing-function: linear;
animation-name:"rotate";
animation-iteration-count: infinite;
ou pour l'image-clé de la méthode?
comment puis-je résoudre ce problème?

CSS:

@-webkit-keyframes rotate {
0% {
-webkit-transform:translate(73px, 73px) rotate(0deg) translate(-73px, -73px) rotate(0deg);
background-color:#2187e7;
background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
}  
13% {
-webkit-transform:translate(73px, 73px) rotate(45deg) translate(-73px, -73px) rotate(-45deg);
}
25% {
-webkit-transform:translate(73px, 73px) rotate(90deg) translate(-73px, -73px) rotate(-90deg);
}
38% {
-webkit-transform:translate(73px, 73px) rotate(135deg) translate(-73px, -73px) rotate(0deg);
}
50% {
-webkit-transform:translate(73px, 73px) rotate(180deg) translate(-73px, -73px) rotate(-180deg);
}
63% {
-webkit-transform:translate(73px, 73px) rotate(225deg) translate(-73px, -73px) rotate(225deg);
}
75% {
-webkit-transform:translate(73px, 73px) rotate(270deg) translate(-73px, -73px) rotate(-270deg);
}
88% {
-webkit-transform:translate(73px, 73px) rotate(315deg) translate(-73px, -73px) rotate(315deg);
}
100% {
-webkit-transform:translate(73px, 73px) rotate(360deg) translate(-73px, -73px) rotate(-360deg);
}
}
/************** F I R E F O X ***********************/
@-moz-keyframes rotate {
0% {
-moz-transform:translate(73px, 73px) rotate(0deg) translate(-73px, -73px) rotate(0deg);
background-color:#2187e7;
background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
}  
13% {
-moz-transform:translate(73px, 73px) rotate(45deg) translate(-73px, -73px) rotate(-45deg);
}
25% {
-moz-transform:translate(73px, 73px) rotate(90deg) translate(-73px, -73px) rotate(-90deg);
}
38% {
-moz-transform:translate(73px, 73px) rotate(135deg) translate(-73px, -73px) rotate(0deg);
}
50% {
-moz-transform:translate(73px, 73px) rotate(180deg) translate(-73px, -73px) rotate(-180deg);
}
63% {
-moz-transform:translate(73px, 73px) rotate(225deg) translate(-73px, -73px) rotate(225deg);
}
75% {
-moz-transform:translate(73px, 73px) rotate(270deg) translate(-73px, -73px) rotate(-270deg);
}
88% {
-moz-transform:translate(73px, 73px) rotate(315deg) translate(-73px, -73px) rotate(315deg);
}
100% {
-moz-transform:translate(73px, 73px) rotate(360deg) translate(-73px, -73px) rotate(-360deg);
}
}
/************************************/
@keyframes rotate {
0% {
transform:translate(73px, 73px) rotate(0deg) translate(-73px, -73px)     rotate(0deg);
background-color:#2187e7;
background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
}  
13% {
transform:translate(73px, 73px) rotate(45deg) translate(-73px, -73px) rotate(-45deg);
}
25% {
transform:translate(73px, 73px) rotate(90deg) translate(-73px, -73px) rotate(-90deg);
}
38% {
transform:translate(73px, 73px) rotate(135deg) translate(-73px, -73px) rotate(0deg);
}
50% {
transform:translate(73px, 73px) rotate(180deg) translate(-73px, -73px) rotate(-180deg);
}
63% {
transform:translate(73px, 73px) rotate(225deg) translate(-73px, -73px) rotate(225deg);
}
75% {
transform:translate(73px, 73px) rotate(270deg) translate(-73px, -73px) rotate(-270deg);
}
88% {
transform:translate(73px, 73px) rotate(315deg) translate(-73px, -73px) rotate(315deg);
}
100% {
transform:translate(73px, 73px) rotate(360deg) translate(-73px, -73px) rotate(-360deg);
}
}
/************** I E ***********************/
@-ms-keyframes rotate {
0% {
-ms-transform:translate(73px, 73px) rotate(0deg) translate(-73px, -73px) rotate(0deg);
background-color:#2187e7;
background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
}  
13% {
-ms-transform:translate(73px, 73px) rotate(45deg) translate(-73px, -73px) rotate(-45deg);
}
25% {
-ms-transform:translate(73px, 73px) rotate(90deg) translate(-73px, -73px) rotate(-90deg);
}
38% {
-ms-transform:translate(73px, 73px) rotate(135deg) translate(-73px, -73px) rotate(0deg);
}
50% {
-ms-transform:translate(73px, 73px) rotate(180deg) translate(-73px, -73px) rotate(-180deg);
}
63% {
-ms-transform:translate(73px, 73px) rotate(225deg) translate(-73px, -73px) rotate(225deg);
}
75% {
-ms-transform:translate(73px, 73px) rotate(270deg) translate(-73px, -73px) rotate(-270deg);
}
88% {
-ms-transform:translate(73px, 73px) rotate(315deg) translate(-73px, -73px) rotate(315deg);
}
100% {
-ms-transform:translate(73px, 73px) rotate(360deg) translate(-73px, -73px) rotate(-360deg);
}
}
/************************************/
@-o-keyframes rotate {
0% {
-o-transform:translate(73px, 73px) rotate(0deg) translate(-73px, -73px) rotate(0deg);
background-color:#2187e7;
background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
}  
13% {
-o-transform:translate(73px, 73px) rotate(45deg) translate(-73px, -73px) rotate(-45deg);
}
25% {
-o-transform:translate(73px, 73px) rotate(90deg) translate(-73px, -73px) rotate(-90deg);
}
38% {
-o-transform:translate(73px, 73px) rotate(135deg) translate(-73px, -73px) rotate(0deg);
}
50% {
-o-transform:translate(73px, 73px) rotate(180deg) translate(-73px, -73px) rotate(-180deg);
}
63% {
-o-transform:translate(73px, 73px) rotate(225deg) translate(-73px, -73px) rotate(225deg);
}
75% {
-o-transform:translate(73px, 73px) rotate(270deg) translate(-73px, -73px) rotate(-270deg);
}
88% {
-o-transform:translate(73px, 73px) rotate(315deg) translate(-73px, -73px) rotate(315deg);
}
100% {
-o-transform:translate(73px, 73px) rotate(360deg) translate(-73px, -73px) rotate(-360deg);
}
}
/*************************************/
#circle {
height: 10px;
width: 10px;
border-radius:25px;
background-color:#2187e7;
background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff);
-webkit-animation-duration: 4s;
-webkit-animation-timing-function: linear;
-webkit-animation-name:"rotate";
-webkit-animation-iteration-count: infinite;
animation-duration: 4s;
animation-timing-function: linear;
animation-name:"rotate";
animation-iteration-count: infinite;
-moz-animation-duration: 4s;
-moz-animation-timing-function: linear;
-moz-animation-name:"rotate";
-moz-animation-iteration-count: infinite;
-ms-animation-duration: 4s;
-ms-animation-timing-function: linear;
-ms-animation-name:"rotate";
-ms-animation-iteration-count: infinite;
-o-animation-duration: 4s;
-o-animation-timing-function: linear;
-o-animation-name:"rotate";
-o-animation-iteration-count: infinite;
position:absolute;
left:-1%;
top:-1%; 
}
Ne pas régler tout cela à l'intérieur d'un -webkit-keyframes . Définir le préfixe des images clés avec le préfixe propriétés à l'intérieur, et les images clés avec unprefixed propriétés
j'ai modifier mon code, merci de vérifier, et il est juste de travailler dans google chrome, pas dans les autres navigateurs

OriginalL'auteur Metta | 2013-12-19

  1. 7

    Supprimer les guillemets de l'animation nom (rotate au lieu de "rotate").

    Ensuite, il sera:

    L'exécution de démo

    -webkit-animation-duration: 4s;
-webkit-animation-timing-function: linear;
-webkit-animation-name:rotate;
-webkit-animation-iteration-count: infinite;
-moz-animation-duration: 4s;
-moz-animation-timing-function: linear;
-moz-animation-name:rotate;
-moz-animation-iteration-count: infinite;
-ms-animation-duration: 4s;
-ms-animation-timing-function: linear;
-ms-animation-name:rotate;
-ms-animation-iteration-count: infinite;
-o-animation-duration: 4s;
-o-animation-timing-function: linear;
-o-animation-name:rotate;
-o-animation-iteration-count: infinite;
animation-duration: 4s;
animation-timing-function: linear;
animation-name:rotate;
animation-iteration-count: infinite;

    Rappelez-vous, la non-préfixés propriétés doit toujours être le dernier, après que le vendeur spécifiques.

    P. S: Au cas où vous ne savez pas, il y a des sites qui le préfixe de votre code au moment de la compilation (comme Prefixr), ou même au moment de l'exécution (comme prefix-free).

    Btw +1, votre animation est jolie 🙂

    Merci beaucoup 🙂
    jsfiddle.net/x5x1ax4n la Mienne ne fonctionne pas sous IE, pour une raison quelconque. Pouvez-vous s'il vous plaît aider? J'aime l'animation aussi. +1.
    Qui version de IE ?

    OriginalL'auteur Andrea Ligios