CSS code not working in Firefox and IE
I am trying to create a wiggle movement using CSS code. The code works fine in Chrome, but not Firefox and IE. Code that works:
@-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;
}
It uses the following div tags. One of them is shown here:
<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/TRACS Page.png" alt="TRACS 202D" name="TRACS" width="87" height="104" border="0" align="top" class="shake" id="TRACS" ></a></p>
</div>
</form>
The above code works fine in Chrome, but in any other browser. Through searching, I found out that for Firefox and other browsers I need to change some syntax and so I added the following code along with the previous code (the following was done only for Firefox), but it still doesn't work.
@-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
}
+3
source to share
2 answers
This is what you need, tested in Chrome, Firefox, IE, Opera and Safari ( demo ):
@-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;
}
+1
source to share
You will need a vendor prefix to work properly. Using Mixin in SASS or SCSS will help eliminate a lot of extraneous code.
If you are using SASS with Compass, you can do it like this:
@import "compass/css3/transform"
@include translate($translate-x, $translate-y, $perspective, $only3d) {
//Insert values here
}
This will then export everything to CSS with all vendor prefixes.
Let me know if you need anything else.
Sources: http://compass-style.org/reference/compass/css3/transform/#mixin-translate
+1
source to share