mardi 14 juin 2016

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

Aucun commentaire:

Enregistrer un commentaire