web-dev-qa-db-fra.com

L'animation CSS3 ne fonctionne pas dans le safari

J'ai un peu d'animation CSS3 qui fonctionne parfaitement dans tous les navigateurs prenant en charge CSS3 sauf Safari. Bizarre n'est ce pas? Ok voici mon 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, cela ne fonctionne pas dans Safari, comme je l'ai dit, il n'y a aucun mouvement.
De plus, toujours et seulement dans Safari, la clé-arm div ne s’affiche que si vous redimensionnez l’écran! C'est là dans le DOM, mais pour une raison quelconque, cela ne se présente pas!
Qu'est-ce que je fais mal?

Merci
Mauro

UPDATE: Ok d'après vos réponses, j'ai compris que @keyframes n'est pas pris en charge sur Safari 4. C'est étrange car sur la même page, j'ai une animation qui fonctionne avec @keyframes!

voici le code 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;
}

Et le html: 

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

Essayez vous-même dans jsFiddle (si vous avez Safari 4) et vous verrez 

css3safaricss-animations
24
Mauro74

Trouvé la solution. Dans Safari, lorsque vous utilisez des images clés, vous devez utiliser la totalité du pourcentage:

cela ne fonctionnera pas: 

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

cette volonté: 

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

Je ne sais pas pourquoi mais c'est comme ça que Safari fonctionne! :)

43
Mauro74

J'avais des problèmes avec l'animation CSS3 dans Safari 6, mais pas dans Safari 4 (4.0.5).

Il semble que la notation abrégée ne fonctionnera pas dans Safari 4.

Donc ça ne marchera pas:

-webkit-animation: rays 40s linear forwards;

Mais cela fonctionnera:

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

Dans les situations où vous essayez d'animer transform sur quelque chose dès qu'il est injecté dans le DOM, j'ai dû ajouter un très bref délai, comme ceci:

animation: rays 40s linear 0.01s infinite;

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

Cela fonctionne sur l'iphone 3 ios 6.1.6 Avec le préfixe -webkit- sur la transformation et l'animation

0
RAF