CSS animation in Firefox not work

Question

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 us

Answer 1

you are missing @-moz-keyframe

working example: http://codepen.io/anon/pen/mwEiD

CSS:

@-webkit-keyframes pulse {
    from {
        -webkit-transform: scale(1.0);
        -moz-transform: scale(1.0);
        opacity: 0.75;
    }

    50% {
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        opacity: 1.0;
    }

    to {
        -webkit-transform: scale(1.0);
        -moz-transform: scale(1.0);
        opacity: 0.75;
    }
}

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

@keyframes pulse {
  from {
    -webkit-transform: scale(1.0);
      -moz-transform: scale(1.0);
    opacity: 0.75;
  }
  50% {
    -webkit-transform: scale(1.2);
      -moz-transform: scale(1.2);
    opacity: 1.0;
  }
  to { 
    -webkit-transform: scale(1.0);
     -moz-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; 
}

.pulse{
  background:red;
  width:200px;
  height:200px;

}