Issues with CSS3 Animation with Firefox (slight artifacts) and Safari (not visible)? - html

Question

Having an issue with my CSS3 animation in Firefox and Safari. It works like a charm in Chrome and Internet Explorer. Spent a while attempting to figure this out myself, but no success. I followed all of the rules I could find, but I must be missing something.
HTML
<div class="background">
<div id="canvas" class="loading"></div>
CSS
.background {
background:#333;
padding-bottom: 140px;
padding-top: 65px;
}
#canvas.loading {
-webkit-animation: animate 1.5s linear infinite;
-moz-animation: animate 1.5s linear infinite;
animation: animate 1.5s linear infinite;
clip: rect(0, 80px, 80px, 40px);
height: 80px;
width: 80px;
position:absolute;
left:45%;
}
#-webkit-keyframes animate {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(220deg)
}
}
#keyframes animate {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(220deg)
}
}
#-moz-keyframes animate {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(220deg)
}
}
#canvas.loading:before {
-webkit-animation: animate2 1.5s ease-in-out infinite;
-moz-animation: animate 1.5s linear infinite;
animation: animate2 1.5s ease-in-out infinite;
clip: rect(0, 80px, 80px, 40px);
content:'';
border-radius: 50%;
height: 80px;
width: 80px;
position:absolute
}
#-webkit-keyframes animate2 {
0% {
box-shadow: inset #5AA0E7 0 0 0 17px;
transform: rotate(-140deg);
}
50% {
box-shadow: inset #5AA0E7 0 0 0 2px;
}
100% {
box-shadow: inset #5AA0E7 0 0 0 17px;
transform: rotate(140deg);
}
}
#-moz-keyframes animate2 {
0% {
box-shadow: inset #5AA0E7 0 0 0 17px;
transform: rotate(-140deg);
}
50% {
box-shadow: inset #5AA0E7 0 0 0 2px;
}
100% {
box-shadow: inset #5AA0E7 0 0 0 17px;
transform: rotate(140deg);
}
}
#keyframes animate2 {
0% {
box-shadow: inset #5AA0E7 0 0 0 17px;
transform: rotate(-140deg);
}
50% {
box-shadow: inset #5AA0E7 0 0 0 2px;
}
100% {
box-shadow: inset #5AA0E7 0 0 0 17px;
transform: rotate(140deg);
}
}
Here is the JSFIDDLE: http://jsfiddle.net/myo4r9kk/
Any help would be greatly appreciated!

Answer 1

Works for me in FF 35, can't say more than that.
Safari needs the transform property to be prefixed, so changing your css to the following will make it work (only included the relevant parts):
#-webkit-keyframes animate {
0% {
-webkit-transform: rotate(0deg)
transform: rotate(0deg)
}
100% {
-webkit-transform: rotate(220deg)
transform: rotate(220deg)
}
}
#-webkit-keyframes animate2 {
0% {
box-shadow: inset #5AA0E7 0 0 0 17px;
-webkit-transform: rotate(-140deg);
transform: rotate(-140deg);
}
50% {
box-shadow: inset #5AA0E7 0 0 0 2px;
}
100% {
box-shadow: inset #5AA0E7 0 0 0 17px;
-webkit-transform: rotate(140deg);
transform: rotate(140deg);
}
}
It's probably best to change your #keyframes in the same way, just in case Safari one day supports unprefixed #keyframes but still needs prefixed transform rule.
And one last thing: It is generally considered safest to put the prefixed versions of a property before the standard version. I'm not totally sure but I guess that applies to keyframes as well, so you might want to put your #-moz-keyframes before your #keyframes. That may even solve your problems with Firefox (assuming a working implementation of the standard gets overwritten by a buggy version because you put the prefixed after the standard.
I took the liberty to update your fiddle with all those changes: http://jsfiddle.net/myo4r9kk/2/
EDIT
I just found this in your code:
-webkit-animation: animate2 1.5s ease-in-out infinite;
-moz-animation: animate 1.5s linear infinite;
animation: animate2 1.5s ease-in-out infinite;
Maybe that explains the problems with Firefox, are you by any chance testing this on FF < 15? In any case that -moz-animation should be the same as the other two.