CSS Animation Error in Firefox

Question

I have a CSS animation on a website to make the button hang effect.

In Chrome and IE, this is fine, but in Firefox, I have an ugly problem.

some white parts still standing after hovering.

CSS Animation:

.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

Everything looks great, perhaps due to the fact that the hardware acceleration options are not enabled

Use hardware acceleration, if enabled.

Currently, browsers such as Chrome, FireFox, Safari, IE9 + and the latest versions of Opera version for all ships with hardware acceleration; they only use it when they have an indication that the DOM element will benefit from this. With CSS, the strongest attribute is that 3D transformation is applied to the element. Since you have already done this, besides hardware acceleration enabled by nothing, this is great in my browser.

In Chrome and Safari, we can see the flickering effect when using CSS transforms or animations. You can use the following declarations to fix the problem:

 .className{ -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; -moz-perspective: 1000; perspective: 1000; /* Other transform properties here */ } 

Another way that seems to work well in desktop and mobile browsers with WebKit support is 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 apps also make good use of the device’s GPU - that's why theyre known to work a little better than web apps. Using hardware acceleration can be especially useful for mobile devices, as it helps reduce resource consumption on the device.