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;

}

Answer 2

Each vendor has it's own implementation. Webkit refers to the layout engine that Apple's Safari browser and Google Chrome are powered by. Internet Explorer also has it's own vendor implementation. Here are all of the variations:

.transformed {
    -webkit-transform: rotate(15deg) scale(1.25, 0.5);
    -moz-transform: rotate(15deg) scale(1.25, 0.5);
    -ms-transform: rotate(15deg) scale(1.25, 0.5);
    transform: rotate(15deg) scale(1.25, 0.5);
}

Answer 3

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;
  }
}

Answer 4

Let me get this all straightened out for you.

Transformations:

There are 2 vendor specifics for the transform and they are "-webkit-" and "-ms-". -webkit- being for safari and chrome, and -ms-transform is only for IE9 suppport.

Animation Keyframes:

There is only 1 vendor specific for animation keyframes and that is -webkit-, which is for safari and chrome (no IE9 support at all).

Therefore you only need to worry about the -webkit- vendor specific for your situation, but you still have to do the non vendor specific one as well, especially since you want it to show up in firefox.

jsFiddle

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

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

    100% {
        -webkit-transform: scale(1.0);       
        opacity: 0.75;
    }
}



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

div.pulse { opacity: 0.75; }
div.pulse:hover {
  animation-name: pulse; 
  animation-duration: 0.5s; 
  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;

}