css關鍵幀轉換在Firefox中不起作用

我意識到我已經在我的css中做了一切正確的事情，以便獲得以下轉換click以在Firefox中工作。然而，這種轉換反彈似乎並沒有在Firefox瀏覽器中工作。儘管Firefox支持關鍵幀。下面是我的代碼片段...css關鍵幀轉換在Firefox中不起作用

.animate { 
-webkit-animation-fill-mode: both; 
-moz-animation-fill-mode: both; 
-o-animation-fill-mode: both; 
animation-fill-mode: both; 
-webkit-animation-duration: 1s; 
-moz-animation-duration: 1s; 
-o-animation-duration: 1s; 
animation-duration: 1s; 
} 


.animate.hinge { 
-webkit-animation-duration: 1s; 
-moz-animation-duration: 1s; 
-o-animation-duration: 1s; 
animation-duration: 1s; 
} 


@-moz-keyframes bounceIn { 
/* line 83, ../sass/style.scss */ 
0% { 
opacity: 0; 
-webkit-transform: scale(0.3); 
} 

/* line 86, ../sass/style.scss */ 
50% { 
opacity: 1; 
-webkit-transform: scale(1.05); 
} 

/* line 91, ../sass/style.scss */ 
70% { 
-webkit-transform: scale(0.9); 
} 

/* line 95, ../sass/style.scss */ 
100% { 
-webkit-transform: scale(1); 
} 
} 


@keyframes bounceIn { 
    /* line 119, ../sass/style.scss */ 
    0% { 
    opacity: 0; 
    transform: scale(0.3); 
    } 

/* line 124, ../sass/style.scss */ 
50% { 
opacity: 1; 
transform: scale(1.05); 
} 

/* line 129, ../sass/style.scss */ 
    70% { 
    transform: scale(0.9); 
    } 

/* line 133, ../sass/style.scss */ 
    100% { 
transform: scale(1); 
} 
} 

/* line 139, ../sass/style.scss */ 
.block { 
-webkit-animation-name: bounceIn; 
-moz-animation-name: bounceIn; 
    -o-animation-name: bounceIn; 
    animation-name: bounceIn; 
}

我失去了一定的前綴或我使用未在FF支持的動畫屬性

來源

2013-12-08 NewKidOnTheBlock

使用-moz前綴的變換屬性，而不是-webkit在@-moz-keyframe之內。

jsFiddle example - 它的工作原理（FF僅用於演示目的）

@-moz-keyframes bounceIn { 
    0% { 
     opacity: 0; 
     -moz-transform: scale(0.3); 
    } 

    50% { 
     opacity: 1; 
     -moz-transform: scale(1.05); 
    } 

    70% { 
     -moz-transform: scale(0.9); 
    } 

    100% { 
     -moz-transform: scale(1); 
    } 
}

而且，與目前的CSS，你可以使用下面的HTML：

<div class="block animate"></div>

我包括.block和.animate都類。（動畫類包含動畫持續時間）。

來源

2013-12-08 17:00:59

看起來不錯，但它仍然沒有實際工作，我已經上傳了一個編輯過的版本。你可以自己測試 – NewKidOnTheBlock

@NewKidOnTheBlock我用jsFiddle例子更新了它。在FF中嘗試。 –

我已經有這樣的HTML結構。對於一些奇怪的情況，這個轉換對我來說不適用於FF – NewKidOnTheBlock

.animate { 
-webkit-animation-fill-mode: both; 
-moz-animation-fill-mode: both; 
-o-animation-fill-mode: both; 
animation-fill-mode: both; 
-webkit-animation-duration: 1s; 
-moz-animation-duration: 1s; 
-o-animation-duration: 1s; 
animation-duration: 1s; 
} 


.animate.hinge { 
-webkit-animation-duration: 1s; 
-moz-animation-duration: 1s; 
-o-animation-duration: 1s; 
animation-duration: 1s; 
} 


@-moz-keyframes bounceIn { 
/* line 83, ../sass/style.scss */ 
0% { 
opacity: 0; 
-moz-transform: scale(0.3); 
} 

/* line 86, ../sass/style.scss */ 
50% { 
opacity: 1; 
-moz-transform: scale(1.05); 
} 

/* line 91, ../sass/style.scss */ 
70% { 
-moz-transform: scale(0.9); 
} 

/* line 95, ../sass/style.scss */ 
100% { 
-webkit-transform: scale(1); 
} 
} 


@keyframes bounceIn { 
    /* line 119, ../sass/style.scss */ 
    0% { 
    opacity: 0; 
    transform: scale(0.3); 
    } 

/* line 124, ../sass/style.scss */ 
50% { 
opacity: 1; 
transform: scale(1.05); 
} 

/* line 129, ../sass/style.scss */ 
    70% { 
    transform: scale(0.9); 
    } 

/* line 133, ../sass/style.scss */ 
    100% { 
transform: scale(1); 
} 
} 

/* line 139, ../sass/style.scss */ 
.block { 
-webkit-animation-name: bounceIn; 
-moz-animation-name: bounceIn; 
    -o-animation-name: bounceIn; 
    animation-name: bounceIn; 
}

來源

2013-12-08 17:06:36

css關鍵幀轉換在Firefox中不起作用

回答

相關問題