CODEWITHSUNDEEP
cssgoogle-chromefirefox
NepsName
NepsName

Reputation: 149

Rotating css not working in chrome

Ok, so, I made a code, and what I am looking for is to have an image, rotating forever and it is working, but only in firefox, it isn't working in chrome, can anybody help?

Code:

<div align="left" class="header">
<img src="http://files.enjin.com/177852/SD/PortalHeaderContinuous1.png" class="header2" style="position:fixed; z-index:50; margin-left:-120px; margin-top:20px;">
</div>

<style>

.header2{

animation: rotate 5s linear 0s infinite;
-webkit-animation: rotate 1s linear 0s infinite;
}

@keyframes rotate
{
0%   {}
100% {-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
transform: rotate(-360deg);}
}

</style>

Upvotes: 3

Views: 7049

Answers (2)

SW4
SW4

Reputation: 71140

Change your CSS to:

 .header2{
    -webkit-animation:rotate 4s linear infinite;
    -moz-animation:rotate 4s linear infinite;
    animation:rotate 4s linear infinite;
 }

 @-moz-keyframes rotate { 100% { -moz-transform: rotate(360deg); } }
 @-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg); } }
 @keyframes rotate { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

Like this fiddle

CSS

div{
    display:inline-block;
}
.parent{
    border:1px solid grey;
}
.child{
    height:100px;
    width:100px;
    border-radius:9px;
    background:blue;
    margin:10px;
}

.rotate {
    -webkit-animation:rotate 4s linear infinite;
    -moz-animation:rotate 4s linear infinite;
    animation:rotate 4s linear infinite;
}
@-moz-keyframes rotate { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg); } }
@keyframes rotate { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

HTML

<div class='parent'>
    <div class='child'>
    </div>    
</div>
<a id='rotate' href='#'>Rotate</a>

jQuery

$('#rotate').click(function(){
   $('.child').addClass('rotate');
});

Upvotes: 4

DaniP
DaniP

Reputation: 38252

You need the prefix for the Keyframes too so change your CSS to this :

@keyframes rotate
 {
 0%   {}
 100% {transform: rotate(-360deg);}
 }
@-webkit-keyframes rotate
 {
 0%   {}
 100% {-webkit-transform: rotate(-360deg);}
}

The demo http://jsfiddle.net/phk24/2/

Upvotes: 3

Related Questions