content - La animación CSS3 no funciona en safari

css browser compatibility

Question

Tengo un poco de animación CSS3 que funciona perfectamente en todos los navegadores que soportan CSS3 excepto Safari. ¿No es extraño? Ok, aquí está mi código:

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, esto no funciona en Safari como dije, no hay movimiento en absoluto.
Además, inmóvil y solo en Safari, el divisor de teclado muestra solo si cambias el tamaño de la pantalla. ¡Está ahí en el DOM pero por alguna razón no aparece!
¿Qué estoy haciendo mal?

Gracias
Mauro

ACTUALIZACIÓN: De acuerdo con sus respuestas, recibí que @keyframes no es compatible con Safari 4. ¡Es extraño porque en la misma página tengo una animación que funciona con @keyframes!

aquí está el código CSS:

.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;
}

Y el html:

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

Inténtalo tú mismo en jsFiddle (si tienes Safari 4) y verás

Answer 1

En situaciones en las que intentas animar la transform en algo tan pronto como se inyecta en el DOM, he tenido que agregar un retraso muy breve, como este:

animation: rays 40s linear 0.01s infinite;

Answer 2

Encontré la solución. En Safari cuando usa fotogramas clave, necesita usar el porcentaje completo:

esto no funcionará:

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

esta voluntad:

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

¡No sé por qué, pero así es como funciona Safari! :)

Answer 3

Estaba teniendo problemas con la animación CSS3 trabajando en Safari 6, pero no en Safari 4 (4.0.5).

Parece que la notación abreviada no funcionará en Safari 4.

Entonces esto no funcionará

-webkit-animation: rays 40s linear forwards;

Pero esto funcionará:

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

Answer 4

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

Esto funciona en iphone 3 ios 6.1.6 con el prefijo -webkit- en transformación y animación