CSS animation in Firefox not work

css, html

Solution

You need to define the FF version of the animation and transform as well as the webkit version

@-moz-keyframes pulse { /* older versions of FF */
  from {
    -moz-transform: scale(1.0);
    opacity: 0.75;
  }
  50% {
    -moz-transform: scale(1.2);
    opacity: 1.0;
  }
  to { 
    -moz-transform: scale(1.0);
    opacity: 0.75;
  }
}

@keyframes pulse {
  from {
    transform: scale(1.0);
    opacity: 0.75;
  }
  50% {
    transform: scale(1.2);
    opacity: 1.0;
  }
  to { 
    transform: scale(1.0);
    opacity: 0.75;
  }
}

Problem

Hello i create animation for my box and all work in chrome. But in firefox dont work. I try to use -moz- but again nothing. CSS code for animation what i using is : ``` @-webkit-keyframes pulse { from { -webkit-transform: scale(1.0); opacity: 0.75; } 50% { -webkit-transform: scale(1.2); opacity: 1.0; } to { -webkit-transform: scale(1.0); opacity: 0.75; } } div.pulse { opacity: 0.75; } div.pulse:hover { -moz-animation-name: pulse; -moz-animation-duration: 0.5s; -moz-animation-iteration-count: 1; -webkit-animation-name: pulse; -webkit-animation-duration: 0.5s; -webkit-animation-iteration-count: 1; } ``` Anyone can tell what i do wrong? Whay dont work in mozila?

Original source