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!