Warum funktioniert meine CSS3-Animation in Safari nicht?

CSS3-Animationen funktionieren in Safari nicht

Sie stoßen auf einige Probleme mit Animationen, die CSS3 in allen Browsern verwenden, die CSS3 unterstützen. Es läuft einwandfrei alle Geräte außer Safari. Ihr Animationscode lautet wie folgt:

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

Wie Sie bereits erwähnt haben, dies Funktioniert nicht in Safari, in der Animation passiert nichts. Außerdem wird, ebenfalls nur in Safari, das „key-arm“-Div nur angezeigt, wenn Sie die Bildschirmgröße ändern! Es existiert im DOM, wird aber aus irgendeinem Grund nicht angezeigt!

Was hast du falsch gemacht?

Antwort

Das Problem liegt bei @keyframes. In Safari 4 werden @keyframes nicht unterstützt. Das ist seltsam, weil Sie auf derselben Seite @keyframes verwenden können, um eine gültige Animation zu erstellen!

Animationscode, der @keyframes unterstützt:

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>

Wenn Sie Safari 4 verwenden Versuchen Sie es in einem Medium (z. B. in jsFiddle) und Sie werden feststellen, dass die Animation nicht funktioniert.

Lösung

Die Lösung gefunden. Wenn Sie Keyframes in Safari verwenden, müssen Sie vollständige Prozentsätze verwenden:

Das wird nicht funktionieren:

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

Das wird:

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

Ich weiß nicht warum, aber so funktioniert Safari!

Das obige ist der detaillierte Inhalt vonWarum funktioniert meine CSS3-Animation in Safari nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!