Question

我正在尝试在div上做一个简单的CSS3翻译动画，它似乎适用于除Firefox以外的所有浏览器。这真的磨我的齿轮。这是我的JS。

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

}

任何帮助将不胜感激。我也尝试了每个供应商的前缀。我应该使用动画持续时间还是过渡持续时间？

Answer 1

尝试使用-moz-也

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

在Firefox中翻译动画

1 个答案: