CSS3 animation not working in safari

问题

I have a bit of CSS3 animation which works perfectly in all the browser which support CSS3 except safari. Weird isn't it? Ok here's my code:

HTML

<div class="right">
    <div class="key-arm"><img src="images/landing/key-arm.png" alt="arm" /></div>
</div>

CSS

.landing .board .right {
    width: 291px;
    height: 279px;
    background: url('../images/landing/key-pnl.png');
    bottom: 16px;
    right: 250px;
    position: absolute;
}
.landing .board .right .key-arm {
    position: absolute;
    left: 44px;
    top: 18px;
    width: 41px;
    height: 120px;
}



/*=== Key Arm Animation ===*/
@-webkit-keyframes keyarm {
    0% { -webkit-transform: rotate(0deg); }
    5% { -webkit-transform: rotate(-14deg); }
    10% { -webkit-transform: rotate(0deg); }
}

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

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

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

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


.right .key-arm{
    -webkit-transform-origin: 12px 105px;
       -moz-transform-origin: 12px 105px;  
        -ms-transform-origin: 12px 105px;  
         -o-transform-origin: 12px 105px;  
            transform-origin: 12px 105px;  

   -webkit-animation: keyarm 8s ease-in-out 0s infinite;
      -moz-animation: keyarm 8s ease-in-out 4s infinite;
       -ms-animation: keyarm 8s ease-in-out 4s infinite;
        -o-animation: keyarm 8s ease-in-out 4s infinite;
           animation: keyarm 8s ease-in-out 0s infinite;
}

Ok this doesn't work in Safari as I said, there's no movement whatsoever.
Also, still and only in Safari, the key-arm div shows only if you resize the screen! It's there in the DOM but for some reason it doesn't show up!
What am I doing wrong?

Thanks
Mauro

UPDATE: Ok from your answers I got that @keyframes is not supported on Safari 4. It's strange because on the same page I have an animation that works using @keyframes!

here's the CSS code:

.board .rays{
    background: url("../images/landing/rays.gif") no-repeat 0 0 red;
    height: 381px;
    left: 251px;
    opacity: 1;
    top: 80px;
    width: 408px;
    position: absolute;
}

.board .bottle{
    background: url("../images/landing/bottle.gif") no-repeat 0 0 lime;
    bottom: 30px;
    height: 405px;
    left: 276px;
    width: 357px;
    z-index: 1;
    position:absolute;
}

/*=== Rays Animation ===*/
@-webkit-keyframes rays{
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes rays{
    0% { -moz-transform: rotate(0deg); }
    100% { -moz-transform: rotate(360deg); }
}

.board .rays{
   -webkit-animation: rays 40s linear 0s infinite;
   -moz-animation: rays 40s linear 0s infinite;
   animation: rays 40s linear 0s infinite;
}

And the html:

<div class="board">
    <div class="rays"></div>
    <div class="bottle"></div>
</div>

Try it yourself in jsFiddle (if you have Safari 4) and you'll see

回答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! :)

回答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;

回答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;

回答4:

@-webkit-keyframes { <- let this symbol to the same line
} - >

This works on iphone 3 ios 6.1.6 with -webkit- prefix on transform and animation

来源：https://stackoverflow.com/questions/9211261/css3-animation-not-working-in-safari