Warum funktioniert meine CSS3-Animation in Safari nicht?-CSS-Tutorial-php.cn

Warum funktioniert meine CSS3-Animation in Safari nicht?

Patricia Arquette

Freigeben： 2024-11-29 21:04:11

Original

899 Leute haben es durchsucht

Why Doesn't My CSS3 Animation Work in Safari?

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

HTML

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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!