CODEWITHSUNDEEP
cssanimation
Mareks
Mareks

Reputation: 135

CSS transform rotation mozilla

can anyone tell me as to why this declaration does not work in Mozilla. In Chrome and safari it works great.

@-webkit-keyframes rotating {
    from{
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);

    }
    to{
        -webkit-transform: rotate(-360deg);
        -moz-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}

.rotating {
    -webkit-animation: rotating 10s linear infinite;
    -moz-animation: rotating 10s linear infinite;
    -o-animation: rotating 10s linear infinite;
    animation: rotating 10s linear infinite;
}

Thank you

Upvotes: 1

Views: 1492

Answers (1)

Vangel Tzo
Vangel Tzo

Reputation: 9303

You should apply 

@-moz-keyframes rotating {
    from{
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);

    }
    to{
        -webkit-transform: rotate(-360deg);
        -moz-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}

You should apply prefixes for keyframes

Upvotes: 4

Related Questions