CODEWITHSUNDEEP
cssanimationwebkit
Daniel Spillere Andrade
Daniel Spillere Andrade

Reputation: 115

CSS3 Animation not working on chrome or safari

I'm trying to get a simple css3 animation to work. Till now it works fine in Firefox, but not in Chrome or Safari.

I added @-webkit-keyframes so it should work on all browsers (maybe not in IE).

This is my css:

.myFace {
        display: block;
        width: 266px;
        height: 266px;
        background: url(http://cl.ly/image/443k292m2C24/face2x.png) no-repeat 0 0;}
.myFace:hover {
    animation: threesixty 1s;
    -webkit-animation: threesixty 1s; /* Safari and Chrome */
}
@keyframes threesixty {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@-webkit-keyframes threesixty {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

This is what i'm trying to do - http://jsfiddle.net/dansku/JTcxH/4/

Upvotes: 2

Views: 3159

Answers (2)

jamesplease
jamesplease

Reputation: 12869

From the MDN article on transforms:

Webkit browsers (Chrome, Safari) still needs the -webkit prefix for transforms, while Firefox, as of version 16, does not.

This code should do the job for you:

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

For Opera and IE9+ support, use -o and -ms prefixes respectively. (IE10 does not require the prefix)

Upvotes: 3

dsgriffin
dsgriffin

Reputation: 68566

I believe that's because inside your keyframes, you're using transform:, which will work for IE10, Firefox and Opera, but haven't also got the webkit equivalent - specifically -webkit-transform which will work for Chrome and Safari.

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

You should also include the -ms- prefix as I've shown above, for versions of IE before 10.

Upvotes: 4

Related Questions