Geek Answers Handbook

CSS animation doesn't work in Firefox

Hi, I am creating an animation for my box, and everyone is working in chrome. But it does not work in firefox. I'm trying to use -moz- but again nothing.

CSS for the animation I'm using:

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

Can anyone tell me what I'm doing wrong? Does it work in the brain?

+4
source share
4 answers

You need to determine the FF version of the animation and convert , as well as the version of the website

@-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;
  }
}
+7
source

Let me straighten it all out for you.

Transformation:

, "-webkit-" "-ms-". -webkit- , -ms-transform - IE9.

:

1 , -webkit-, ( IE9 ).

-webkit-, , , , 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;

}
+4

. Webkit , Apple Safari Google Chrome. Internet Explorer . :

.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);
}
0

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

}
0
source

More articles:


All Articles