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

Warum funktioniert meine CSS3-Animation in Safari nicht?

Susan Sarandon

Freigeben： 2024-12-14 18:08:11

Original

613 Leute haben es durchsucht

Why is my CSS3 animation not working in Safari?

CSS3-Animation funktioniert in Safari nicht

Sie sind auf das Problem gestoßen, dass die CSS3-Animation in Safari nicht funktioniert. Obwohl die Animation in allen anderen Browsern, die CSS3 unterstützen, einwandfrei funktioniert, funktioniert sie in Safari nicht richtig. Hier ist Ihr Code:

HTML

<div>

Nach dem Login kopieren

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); }
    100% { -webkit-transform: rotate(0deg); }
}

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

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

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

@keyframes keyarm{
    0% { transform: rotate(0deg); }
    5% { transform: rotate(-14deg); }
    10% { transform: rotate(0deg); }
    100% { 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;
}

Nach dem Login kopieren

Sie stoßen in Safari auf Das Problem ist wie folgt:

Animation ist ungültig.
key-arm div wird nur angezeigt, wenn die Bildschirmgröße geändert wird.

In Safari werden Keyframes unterstützt, es gibt jedoch eine Einschränkung. Bei der Deklaration von Keyframes müssen Sie vollständige Prozentsätze verwenden. Beispielsweise wird der folgende Code nicht in Safari ausgeführt:

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

Nach dem Login kopieren

Der folgende Code wird in Safari ausgeführt:

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

Um Ihr Problem zu lösen, müssen Sie also Folgendes tun Ändern Sie den Keyarm-Key. Die Frames werden aktualisiert auf:

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

Nach der Aktualisierung läuft Ihre Animation normal in 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!