Pourquoi mon animation CSS3 ne fonctionne-t-elle pas dans Safari ?

Les animations CSS3 ne fonctionnent pas dans Safari

Vous rencontrez des problèmes avec les animations qui utilisent CSS3 dans tous les navigateurs prenant en charge CSS3. Cela fonctionne parfaitement sur tous les appareils sauf Safari. Votre code d'animation est le suivant :

HTML

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

CSS

.landing .board .right {
    /* ... other styles ... */
}
.landing .board .right .key-arm {
    /* ... other styles ... */
}

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

@-moz-keyframes keyarm {
    /* ... other keyframes ... */
}

@-ms-keyframes keyarm {
    /* ... other keyframes ... */
}

@-o-keyframes keyarm {
    /* ... other keyframes ... */
}

@keyframes keyarm{
    /* ... other keyframes ... */
}

.right .key-arm{
    /* ... other styles ... */
    -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;
}

Comme vous l'avez mentionné, ce Ne fonctionne pas dans Safari, rien ne se passe dans l'animation. De plus, également uniquement dans Safari, le div « key-arm » n'apparaît que lorsque vous redimensionnez l'écran ! Il existe dans le DOM, mais pour une raison quelconque, il n'apparaît pas !

Qu'avez-vous fait de mal ?

Réponse

Le problème vient de @keyframes. Dans Safari 4, les @keyframes ne sont pas pris en charge. C'est bizarre car sur la même page vous pouvez utiliser @keyframes pour créer une animation valide !

Code d'animation prenant en charge les @keyframes :

CSS

.board .rays{
    /* ... other styles ... */
}

.board .bottle{
    /* ... other styles ... */
}

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

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

HTML

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

Si vous êtes sur Safari 4 Essayez-le sur un support (par exemple dans jsFiddle) et vous constaterez que l'animation ne fonctionne pas.

Solution

J'ai trouvé la solution. Lorsque vous utilisez des images clés dans Safari, vous devez utiliser des pourcentages complets :

Cela ne fonctionnera pas :

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

Celui-ci :

@-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 !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!