CSS3 animation not working in safari

Solution 1:

Found the solution. In Safari when you use Keyframes you need to use the whole percentage:

this won't work:

@-webkit-keyframes keyarm {
    0% { -webkit-transform: rotate(0deg); }
    5% { -webkit-transform: rotate(-14deg); }
    10% { -webkit-transform: rotate(0deg); }
}

this will:

@-webkit-keyframes keyarm {
    0% { -webkit-transform: rotate(0deg); }
    5% { -webkit-transform: rotate(-14deg); }
    10% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(0deg); }
}

Don't know why but that's the way Safari works! :)

Solution 2:

I was having troubles with CSS3 animation working in Safari 6, but not in Safari 4 (4.0.5).

It appears that the shorthand notation will not work in Safari 4.

So this won't work :

-webkit-animation: rays 40s linear forwards;

But this will work :

-webkit-animation-name: rays;
-webkit-animation-duration: 40s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;

Solution 3:

In situations where you're trying to animate transform on something as soon as it's injected into the DOM, I've had to add a very brief delay, like this:

animation: rays 40s linear 0.01s infinite;