Kod CSS nie działa w Firefoksie i IE - css, internet-explorer, firefox

Próbuję utworzyć ruch wiggle przy użyciu kodu CSS. Kod działa dobrze w Chrome, ale nie w Firefox i IE. Działający kod to:

@-webkit-keyframes spaceboots {
0% {
-webkit-transform: translate(2px, 1px) rotate(0deg);
}
10% {
-webkit-transform: translate(-1px, -2px) rotate(-1deg);
}
20% {
-webkit-transform: translate(-3px, 0px) rotate(1deg);
}
30% {
-webkit-transform: translate(0px, 2px) rotate(0deg);
}
40% {
-webkit-transform: translate(1px, -1px) rotate(1deg);
}
50% {
-webkit-transform: translate(-1px, 2px) rotate(-1deg);
}
60% {
-webkit-transform: translate(-3px, 1px) rotate(0deg);
}
70% {
-webkit-transform: translate(2px, 1px) rotate(-1deg);
}
80% {
-webkit-transform: translate(-1px, -1px) rotate(1deg);
}
90% {
-webkit-transform: translate(2px, 2px) rotate(0deg);
}
100% {
-webkit-transform: translate(1px, -2px) rotate(-1deg);
}
}
.shake:hover, .shake:focus {
-webkit-animation-name: spaceboots;
-webkit-animation-duration: 0.8s;
-webkit-transform-origin:50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}

Działa na następujące znaczniki div. Jedna z nich jest podana tutaj:

<form action="http://www.ahtcsonline.com/descriptions-tracs.html" target="_blank" onclick="window.open("http://www.ahtcsonline.com/descriptions-tracs.html","popup","width=650,height=600,scrollbars=yes,resizable=yes,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0"); return false">
<div class="c3">
<p class="Title"><a href="descriptions-tracs.html" target="_parent" title="Register for our Online TRACS Class"><img src="/images/images/TRACS Page.png" alt="TRACS 202D" name="TRACS" width="87" height="104" border="0" align="top" class="shake" id="TRACS" ></a></p>
</div>
</form>

Powyższy kod działa poprawnie w Chrome, ale na dowolnyminna przeglądarka. Poprzez wyszukiwanie dowiedziałem się, że dla Firefoksa i innych przeglądarek muszę zmienić jakąś składnię, więc dodałem następujący kod wraz z poprzednim kodem (poniższy tekst został stworzony tylko dla Firefoksa), ale nadal nie działa.

    @-webkit-keyframes spaceboots {
0% { -moz-transform: translate(2px, 1px) rotate(0deg); }
10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }
30% { -moz-transform: translate(0px, 2px) rotate(0deg); }
40% { -moz-transform: translate(1px, -1px) rotate(1deg); }
50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }
70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }
80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }
90% { -moz-transform: translate(2px, 2px) rotate(0deg); }
100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }
}
.shake:hover,
.shake:focus {
-moz-animation-name: spaceboots;
-moz-animation-duration: 0.8s;
-moz-transform-origin:50% 50%;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
}
.shake {
display:inline-block
}

Odpowiedzi:

To jest to, czego potrzebujesz, przetestowane na Chrome, Firefox, IE, Opera i Safari (próbny):

@-webkit-keyframes spaceboots {
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */ }
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); /* Chrome, Opera 15+, Safari 3.1+ */ }
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); /* Chrome, Opera 15+, Safari 3.1+ */ }
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */ }
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); /* Chrome, Opera 15+, Safari 3.1+ */ }
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); /* Chrome, Opera 15+, Safari 3.1+ */ }
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */ }
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); /* Chrome, Opera 15+, Safari 3.1+ */ }
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); /* Chrome, Opera 15+, Safari 3.1+ */ }
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */ }
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); /* Chrome, Opera 15+, Safari 3.1+ */ }
}
@-moz-keyframes spaceboots {
0% { transform: translate(2px, 1px) rotate(0deg); /* Firefox 16+, IE 10+, Opera */ }
10% { transform: translate(-1px, -2px) rotate(-1deg); /* Firefox 16+, IE 10+, Opera */ }
20% { transform: translate(-3px, 0px) rotate(1deg); /* Firefox 16+, IE 10+, Opera */ }
30% { transform: translate(0px, 2px) rotate(0deg); /* Firefox 16+, IE 10+, Opera */ }
40% { transform: translate(1px, -1px) rotate(1deg); /* Firefox 16+, IE 10+, Opera */ }
50% { transform: translate(-1px, 2px) rotate(-1deg); /* Firefox 16+, IE 10+, Opera */ }
60% { transform: translate(-3px, 1px) rotate(0deg); /* Firefox 16+, IE 10+, Opera */ }
70% { transform: translate(2px, 1px) rotate(-1deg); /* Firefox 16+, IE 10+, Opera */ }
80% { transform: translate(-1px, -1px) rotate(1deg); /* Firefox 16+, IE 10+, Opera */ }
90% { transform: translate(2px, 2px) rotate(0deg); /* Firefox 16+, IE 10+, Opera */ }
100% { transform: translate(1px, -2px) rotate(-1deg); /* Firefox 16+, IE 10+, Opera */ }
}
@-ms-keyframes spaceboots {
0% { -ms-transform: translate(2px, 1px) rotate(0deg); /* IE 9 */ }
10% { -ms-transform: translate(-1px, -2px) rotate(-1deg); /* IE 9 */ }
20% { -ms-transform: translate(-3px, 0px) rotate(1deg); /* IE 9 */ }
30% { -ms-transform: translate(0px, 2px) rotate(0deg); /* IE 9 */ }
40% { -ms-transform: translate(1px, -1px) rotate(1deg); /* IE 9 */ }
50% { -ms-transform: translate(-1px, 2px) rotate(-1deg); /* IE 9 */ }
60% { -ms-transform: translate(-3px, 1px) rotate(0deg); /* IE 9 */ }
70% { -ms-transform: translate(2px, 1px) rotate(-1deg); /* IE 9 */ }
80% { -ms-transform: translate(-1px, -1px) rotate(1deg); /* IE 9 */ }
90% { -ms-transform: translate(2px, 2px) rotate(0deg); /* IE 9 */ }
100% { -ms-transform: translate(1px, -2px) rotate(-1deg); /* IE 9 */ }
}
@-o-keyframes spaceboots {
0% { transform: translate(2px, 1px) rotate(0deg); /* Firefox 16+, IE 10+, Opera */ }
10% { transform: translate(-1px, -2px) rotate(-1deg); /* Firefox 16+, IE 10+, Opera */ }
20% { transform: translate(-3px, 0px) rotate(1deg); /* Firefox 16+, IE 10+, Opera */ }
30% { transform: translate(0px, 2px) rotate(0deg); /* Firefox 16+, IE 10+, Opera */ }
40% { transform: translate(1px, -1px) rotate(1deg); /* Firefox 16+, IE 10+, Opera */ }
50% { transform: translate(-1px, 2px) rotate(-1deg); /* Firefox 16+, IE 10+, Opera */ }
60% { transform: translate(-3px, 1px) rotate(0deg); /* Firefox 16+, IE 10+, Opera */ }
70% { transform: translate(2px, 1px) rotate(-1deg); /* Firefox 16+, IE 10+, Opera */ }
80% { transform: translate(-1px, -1px) rotate(1deg); /* Firefox 16+, IE 10+, Opera */ }
90% { transform: translate(2px, 2px) rotate(0deg); /* Firefox 16+, IE 10+, Opera */ }
100% { transform: translate(1px, -2px) rotate(-1deg); /* Firefox 16+, IE 10+, Opera */ }
}
@keyframes spaceboots {
0% { transform: translate(2px, 1px) rotate(0deg); /* Firefox 16+, IE 10+, Opera */ }
10% { transform: translate(-1px, -2px) rotate(-1deg); /* Firefox 16+, IE 10+, Opera */ }
20% { transform: translate(-3px, 0px) rotate(1deg); /* Firefox 16+, IE 10+, Opera */ }
30% { transform: translate(0px, 2px) rotate(0deg); /* Firefox 16+, IE 10+, Opera */ }
40% { transform: translate(1px, -1px) rotate(1deg); /* Firefox 16+, IE 10+, Opera */ }
50% { transform: translate(-1px, 2px) rotate(-1deg); /* Firefox 16+, IE 10+, Opera */ }
60% { transform: translate(-3px, 1px) rotate(0deg); /* Firefox 16+, IE 10+, Opera */ }
70% { transform: translate(2px, 1px) rotate(-1deg); /* Firefox 16+, IE 10+, Opera */ }
80% { transform: translate(-1px, -1px) rotate(1deg); /* Firefox 16+, IE 10+, Opera */ }
90% { transform: translate(2px, 2px) rotate(0deg); /* Firefox 16+, IE 10+, Opera */ }
100% { transform: translate(1px, -2px) rotate(-1deg); /* Firefox 16+, IE 10+, Opera */ }
}
.shake:hover,
.shake:focus {
-webkit-animation: spaceboots 0.8s infinite; /* Chrome, Opera 15+, Safari 5+ */
animation: spaceboots 0.8s infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
transform-origin:50% 50%;
-webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */
animation-timing-function: linear;
}

Aby wszystko działało poprawnie, musisz zaopatrzyć się we wszystkie przedrostki. Użycie miksu w SASS lub SCSS pomogłoby wyeliminować wiele kodu zewnętrznego.

Jeśli używasz SASS z Compass, możesz to zrobić w następujący sposób:

@import "compass/css3/transform"

@include translate($translate-x, $translate-y, $perspective, $only3d) {
//Insert values here
}

To wyeksportowałoby wszystko do CSS ze wszystkimi prefiksami dostawcy.

Daj mi znać, jeśli potrzebujesz czegoś jeszcze.

Źródła: http://compass-style.org/reference/compass/css3/transform/#mixin-translate

http://sass-lang.com/