Firefox中的CSS动画不工作 [英] CSS animation in Firefox not work

问题描述

您好，我为我的盒子创建动画，所有工作在chrome。但在firefox不工作。
我尝试使用-moz-但是没有什么。

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代码是：

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

推荐答案

您需要定义动画的FF版本，并转换以及 webkit版本

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

这篇关于Firefox中的CSS动画不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！