title: CSS animation Bug in Firefox
body: <p>I have a CSS animation on a Website to make a hover effect on a button.</p>
  
  <p>In Chrome and IE it lokes fine but in Firefox I got a ugly issue.</p>
  
  <p><a href="https://i.stack.imgur.com/y2po7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/y2po7.png" alt="enter image description here"></a></p>
  
  <p>some White pieces still standing after hover.</p>
  
  <p>Animation CSS:</p>
  
  <pre><code>.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);
    }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/6oRPR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6oRPR.png" alt="enter image description here"></a></p>