CODEWITHSUNDEEP
csscss-animations
Felix
Felix

Reputation: 5619

CSS animation Bug in Firefox

I have a CSS animation on a Website to make a hover effect on a button.

In Chrome and IE it lokes fine but in Firefox I got a ugly issue.

enter image description here

some White pieces still standing after hover.

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

enter image description here

Upvotes: 6

Views: 5107

Answers (1)

codefreaK
codefreaK

Reputation: 3662

Everything Looks fine it might be due to hardware acceleration settings not be on

Use hardware acceleration when available turned on .

Currently, browsers like Chrome, FireFox, Safari, IE9+ and the latest version of Opera all ship with hardware acceleration; they only use it when they have an indication that a DOM element would benefit from it. With CSS, the strongest indication is that a 3D transformation is being applied to an element.Since you have already that done your then other than hardware acceleration turned on nothing seems to cause problem its fine in my browser.

In Chrome and Safari we might see a flickering effect when using CSS transforms or animations. The following declarations can be used to fix the issue:

.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 method that seems to work well in WebKit-powered desktop and mobile browsers 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 applications also make good use of the device GPU –– that’s why they’re known to perform slightly better than Web apps. Using hardware acceleration can be especially useful on mobile devices because it helps reduce resource consumption on the device.

Upvotes: 4

Related Questions