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

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;

}