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; 

}