L’animazione CSS3 non funziona in safari

Ho un po ‘di animazione CSS3 che funziona perfettamente in tutti i browser che supportano CSS3 tranne Safari. Strano non è vero? Ok ecco il mio codice:

HTML

arm

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, questo non funziona in Safari, come ho detto, non c’è alcun movimento.
Inoltre, sempre e solo in Safari, il div key-arm mostra solo se ridimensiona lo schermo! È lì nel DOM ma per qualche motivo non si presenta!
Che cosa sto facendo di sbagliato?

Grazie
Mauro

AGGIORNAMENTO: Ok dalle tue risposte Ho capito che @keyframes non è supportato su Safari 4. È strano perché sulla stessa pagina ho un’animazione che funziona usando @keyframes!

ecco il codice 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; } 

E l’html:

 

Provalo tu stesso in jsFiddle (se hai Safari 4) e vedrai

Trovato la soluzione. In Safari quando si utilizzano i fotogrammi chiave è necessario utilizzare l’intera percentuale:

questo non funzionerà:

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

questo sarà:

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

Non so perché, ma è così che funziona Safari! 🙂

Stavo avendo problemi con l’animazione CSS3 che funziona in Safari 6, ma non in Safari 4 (4.0.5).

Sembra che la notazione abbreviata non funzioni in Safari 4.

Quindi questo non funzionerà:

 -webkit-animation: rays 40s linear forwards; 

Ma questo funzionerà:

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

Nelle situazioni in cui stai cercando di animare la transform su qualcosa non appena viene iniettata nel DOM, ho dovuto aggiungere un ritardo molto breve, come questo:

animation: rays 40s linear 0.01s infinite;

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

Funziona su iphone 3 ios 6.1.6 con prefisso -webkit- su trasformazione e animazione