在Firefox中翻譯動畫

我正試圖在div上做一個簡單的CSS3翻譯動畫，它似乎適用於除Firefox以外的所有瀏覽器。這真的磨礪我的齒輪。這是我的JS。在Firefox中翻譯動畫

var translateAnimationTime = 1000; 

$('.some-class').css({ 
    transform: 'translateX(0px)', 
    '-webkit-transition-duration': translateAnimationTime + 'ms', 
    'transition-duration': translateAnimationTime + 'ms' 
});

這裏是我的CSS

.some-class { 

    -webkit-backface-visibility: hidden; 
    -webkit-transform: translateZ(0); 

    transition-property: all; 

    -webkit-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); 
    -moz-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); 
    animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); 

}

任何幫助，將不勝感激。我也試過每一個供應商的前綴。我應該使用動畫持續時間還是過渡持續時間？

來源

2013-05-01 Chester Rivas

這裏什麼是動畫的目標？從translateZ（0）到translateX（0）？ – 2013-05-01 21:44:43

動畫目標是通過translateX沿x軸移動某個東西。所以水平運動。 translateZ是爲了觸發GPU加速動畫 – 2013-05-22 13:57:25

您正在使用'animation-timing-function'而不是'transition-timing-function' - https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions？redirectlocale = en-US＆redirectslug = CSS％2教程％2FUsing_CSS_transitions – 2013-10-17 16:56:55

嘗試-moz-也

$('.some-class').css({ 
    transform: 'translateX(0px)', 
    '-webkit-transition-duration': translateAnimationTime + 'ms', 
    '-moz-transition-duration': translateAnimationTime + 'ms', 
    'transition-duration': translateAnimationTime + 'ms' 
});

來源

2013-05-01 21:08:52 Nedudi

我相信我試過了，它沒有工作。讓我再嘗試一次。 – 2013-05-22 13:58:02

在Firefox中翻譯動畫

回答

相關問題