title: Cross-Browser CSS3 Keyframe Animation Firefox
body: <p>I have a simple "pulsating" effect on the play-button (which is an anchor tag), using CSS3 and keyframes.</p>
  
  <p>While it works flawlessly in Chrome and Safari, it doesn't seem to be working in Firefox. Does anyone have an idea on why?</p>
  
  <pre><code>li &gt; a {
  
      -webkit-animation: pulsate 3s ease-in-out;
      -moz-animation: pulsate 3s ease-in-out;
      -o-animation: pulsate 3s ease-in-out;
      animation: pulsate 3s ease-in-out;
  
      -webkit-animation-iteration-count: infinite;
      -moz-animation-iteration-count: infinite;
      -o-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
  }
  
  @-webkit-keyframes pulsate {
      0% {
          -webkit-transform: scale(0.8, 0.8);
          -moz-transform: scale(0.8, 0.8);
          -o-transform: scale(0.8, 0.8);
          transform: scale(0.8, 0.8);
          opacity: 0.3;
      }
  
      50% {
          -webkit-transform: scale(1, 1);
          -moz-transform: scale(1, 1);
          -o-transform: scale(1, 1);
          transform: scale(1, 1);
          opacity: 1.0;
      }
  
      100% {
          -webkit-transform: scale(0.8, 0.8);
          -moz-transform: scale(0.8, 0.8);
          -o-transform: scale(0.8, 0.8);
          transform: scale(0.8, 0.8);
          opacity: 0.3;
      }
  }
  </code></pre>
  
  <p>Any help would be greatly appreciated. Thanks!</p>