Jquery 在Firefox中翻译动画
我试图在div上做一个简单的CSS3翻译动画,它似乎可以在除Firefox之外的所有浏览器上运行。这真是在磨我的齿轮。这是我的JSJquery 在Firefox中翻译动画,jquery,css,firefox,translate,translate-animation,Jquery,Css,Firefox,Translate,Translate Animation,我试图在div上做一个简单的CSS3翻译动画,它似乎可以在除Firefox之外的所有浏览器上运行。这真是在磨我的齿轮。这是我的JS var translateAnimationTime = 1000; $('.some-class').css({ transform: 'translateX(0px)', '-webkit-transition-duration': translateAnimationTime + 'ms', 'transition-duration'
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);
}
任何帮助都将不胜感激。我也尝试了每一个供应商前缀。我应该使用动画持续时间还是过渡持续时间?尝试使用-moz-也
$('.some-class').css({
transform: 'translateX(0px)',
'-webkit-transition-duration': translateAnimationTime + 'ms',
'-moz-transition-duration': translateAnimationTime + 'ms',
'transition-duration': translateAnimationTime + 'ms'
});
这里的动画目标是什么?从translateZ(0)到translateX(0)?动画的目标是通过translateX沿x轴移动某物。所以水平运动。translateZ用于触发GPU加速动画您使用的是“动画计时功能”而不是“过渡计时功能”-