在 Firefox 中翻译动画答案

【问题标题】：Translate Animation in Firefox在 Firefox 中翻译动画
【发布时间】：2013-04-25 22:31:49
【问题描述】：

我正在尝试在 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);

}

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

【问题讨论】：

这里的动画目标是什么？从 translateZ(0) 到 translateX(0)？
动画目标是通过 translateX 沿 x 轴移动一些东西。所以水平运动。 translateZ 是为了触发 GPU 加速动画
你使用的是“animation-timing-function”而不是“transition-timing-function” - developer.mozilla.org/en-US/docs/Web/Guide/CSS/…

标签： jquery css firefox translate translate-animation

【解决方案1】：

也试试 -moz-

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

【讨论】：