Firefox中的CSS动画不起作用

Question

您好，我为我的盒子创建了动画，并且所有的工作都是在Chrome中进行的。但在Firefox中不工作。 我尝试使用-moz-但没有。我使用的是什么动画

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

任何人都可以告诉我做什么了？ Whay不在mozila工作？

Answer 1

您需要定义动画的FF版本和改造以及 WebKit的版本

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

每个厂商都有自己的执行。 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); 
} 

Answer 3

你缺少@ -moz-关键帧

工作示例：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 4

让我得到这一切理顺为你。

Transformations:

有2个供应商细节变换及他们是 “-webkit-” 和 “-ms-”。 -webkit-用于safari和chrome，而-ms-transform仅用于IE9 suppport。

Animation Keyframes:

只有1供应商特定的动画关键帧和即-webkit-，其是用于Safari和铬（无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; 

}