0

I'm trying to do a simple CSS3 translate animation on a div and it seems to work on on all browsers except for Firefox. This is really grinding my gears. Here is my JS.

var translateAnimationTime = 1000;

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

And here is my 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);

}

Any help would be appreciated. I tried every single vendor prefix as well. Should I be using animation-duration or transition-duration?

4

1 に答える 1

0

-moz- も試してみてください

$('.some-class').css({
    transform: 'translateX(0px)',
    '-webkit-transition-duration': translateAnimationTime + 'ms',
    '-moz-transition-duration': translateAnimationTime + 'ms',
    'transition-duration': translateAnimationTime + 'ms'
});
于 2013-05-01T21:08:52.930 に答える