CSS-Animation Fehler in Firefox

Question

Ich habe eine CSS-Animation auf einer Website, um einen Hover-Effekt auf eine Schaltfläche zu machen.

In Chrome und IE sieht es gut aus, aber in Firefox bekam ich ein hässliches Problem.

einige weiße Stücke stehen noch nach schweben.

Animation, CSS:

.Hotel:hover{ 
    animation-name: pulse; 
    animation-duration: 1s; 
} 


@-webkit-keyframes pulse { 
    from { 
    -webkit-transform: scale3d(1, 1, 1); 
    transform: scale3d(1, 1, 1); 
    } 

    50% { 
    -webkit-transform: scale3d(100.10, 10.10, 10.10); 
    transform: scale3d(100.10, 10.10, 10.10); 
    } 

    to { 
    -webkit-transform: scale3d(1, 1, 1); 
    transform: scale3d(1, 1, 1); 
    } 
} 

@keyframes pulse { 
    from { 
    -webkit-transform: scale3d(1, 1, 1); 
    transform: scale3d(1, 1, 1); 
    } 

    50% { 
    -webkit-transform: scale3d(1.80, 1.80, 1.80); 
    transform: scale3d(1.80, 1.80, 1.80); 
    } 

    to { 
    -webkit-transform: scale3d(1, 1, 1); 
    transform: scale3d(1, 1, 1); 
    } 
} 

Answer 1

Alles sieht gut aus, es könnte aufgrund von Hardware-Beschleunigung Einstellungen werden nicht auf

Nutzung der Hardwarebeschleunigung, wenn verfügbar eingeschaltet.

Gegenwärtig werden Browser wie Chrome, FireFox, Safari, IE9 + und die neueste -Version von Opera alle mit Hardwarebeschleunigung geliefert; Sie verwenden es nur , wenn sie einen Hinweis darauf haben, dass ein DOM-Element davon profitieren würde. Mit CSS, ist das stärkste Anzeichen dafür, dass eine 3D-Transformation auf ein Element angewendet wird. Da Sie bereits Ihre dann anders als Hardwarebeschleunigung aktiviert haben, scheint nichts zu verursachen OK in meinem Browser.

In Chrome und Safari sehen wir möglicherweise einen flackernden Effekt bei der Verwendung von CSS-Transformationen oder Animationen. Die folgenden Erklärungen können verwendet werden, um das Problem zu beheben:

.className{ 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 

    backface-visibility: hidden; 

    -webkit-perspective: 1000; 
    -moz-perspective: 1000; 
    perspective: 1000; 
    /* Other transform properties here */ 
} 

Eine andere Methode, die gut in WebKit betriebenen Desktop- und mobilen Browsern zu funktionieren scheint, ist translate3d:

.className{ 
    -webkit-transform: translate3d(0, 0, 0); 
    -moz-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
    /* Other transform properties here */ 
} 

native mobile Anwendungen auch gut gebrauchen von der Geräte-GPU - deshalb sind sie bekanntermaßen etwas besser als Web-Apps. Die Verwendung der Hardwarebeschleunigung kann besonders bei mobilen Geräten nützlich sein, da dadurch der Ressourcenverbrauch auf dem Gerät reduziert wird.