css animation and -moz- does not work in absolute block

Question

This rotate animation does not work in mozila firefox but in google chrome, it is working properly. Actually this problem only occurs in absolute and relative blocks.In general cases this animation work properly in any browser. Please help..

My css codes are given below.

css code :

.gear1{
display:block; 
width:64px; 
height:64px; 
position:absolute; 
left:0; 
bottom:0; 
-webkit-animation-name: rotate;
-webkit-animation-iteration-count: infinite; 
-webkit-animation-timing-function: linear; 
-webkit-animation-duration: 3s; 
-moz-animation-name: rotate;
-moz-animation-iteration-count: infinite; 
-moz-animation-timing-function: linear; 
-moz-animation-duration: 3s; 
-o-animation-name: rotate;
-o-animation-iteration-count: infinite; 
-o-animation-timing-function: linear; 
-o-animation-duration: 3s; 
-ms-animation-name: rotate;
-ms-animation-iteration-count: infinite; 
-ms-animation-timing-function: linear; 
-ms-animation-duration: 3s; 
animation-name:rotate; 
animation-iteration-count:infinite; 
animation-timing-function:linear; 
animation-duration:3s;}

Css Animation :

@-webkit-keyframes rotate {
from {
    -webkit-transform: rotate(0deg);
}
to { 
    -webkit-transform: rotate(360deg);
}}
@-moz-keyframes rotate {
from {
    -webkit-transform: rotate(0deg);
}
to { 
    -webkit-transform: rotate(360deg);
}}
@-o-keyframes rotate {
from {
    -webkit-transform: rotate(0deg);
}
to { 
    -webkit-transform: rotate(360deg);
}}
@-ms-keyframes rotate {
from {
    -webkit-transform: rotate(0deg);
}
to { 
    -webkit-transform: rotate(360deg);
}}

I have a new question and I edit this question...... can you help me plssss... — Rocky, Mar 03 '15 at 11:19
Please do not edit, but ask a new question instead. Otherwise the accepted answer will no longer be valid. Cheers — jbutler483, Mar 03 '15 at 11:22
@Rocky: Please do not edit the question drastically after answers have been posted. It invalidates the already provided answers. In this case you have already accepted one too. It is better to create a new question, SO doesn't have any limits on how many you can ask in a day :) — Harry, Mar 03 '15 at 11:29

score 3 · Accepted Answer · answered Mar 03 '15 at 10:30

3

This is because you are using the wrong vendor prefixes in your keyframe declaration. You need to use the same vendor (for transform) prefix of your @key-{vendor}-keyframes.

@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
    }
    to { 
        -webkit-transform: rotate(360deg);
    }
}

@-moz-keyframes rotate {
    from {
        -moz-transform: rotate(0deg);
    }
    to { 
        -moz-transform: rotate(360deg);
    }
}

@-o-keyframes rotate {
    from {
        -o-transform: rotate(0deg);
    }
    to { 
        -o-transform: rotate(360deg);
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to { 
        transform: rotate(360deg);
    }
}

answered Mar 03 '15 at 10:30

Mike Vranckx

5,557
3
25
28

1

The `-ms-` prefix can be removed altogether as it's not used. An unprefixed rule would help as well. See [this answer](http://stackoverflow.com/questions/28545533/how-should-you-prefix-transform-properties-in-css3-animations/28546443#28546443) for an explanation. – BoltClock Mar 03 '15 at 10:31
Indeed, I edited my answer with the correct prefixes. Normally I'm using CSS authoring framework which generates it for me. – Mike Vranckx Mar 03 '15 at 10:35
Can you help me about one more thing ?? – Rocky Mar 03 '15 at 10:35
Yes sure, if it is related to the same question, just edit your question. – Mike Vranckx Mar 03 '15 at 10:39
actually I have some blocks with absolute property wich is viseable in chrome but not in firefox. I dont understand that where is the actual error. – Rocky Mar 03 '15 at 10:42

css animation and -moz- does not work in absolute block

1 Answers1