jQuery animate a -webkit-transform


Is it possible to use jQuery to animate a webkit translate3d?

I read that when using the animate property of jQuery that you must camel case the css properties but in the case of the translate3d this doesn't seem to work.

I have the following code that I would like to animate instead of it just happening immediately?

$("#main-nav").css('-webkit-transform', "translate3d(0px, " + e + "px, 0px) scale(1)");

For clarification "e" is a variable that is passed to a function that my above code is run from.

Problem courtesy of: user2440843


Use a text-indent and it will work. Example:

$(".test").animate({ textIndent: 100 }, {
    step: function(now,fx) {
        $(this).css('-webkit-transform',"translate3d(0px, " + now + "px, 0px)");

Also, you can remove scale(1) from -webkit-transform.


To avoid changing of a useful property you can give any property there. See the example bellow:

$(".test").animate({ whyNotToUseANonExistingProperty: 100 }, {
    step: function(now,fx) {
        $(this).css('-webkit-transform',"translate3d(0px, " + now + "px, 0px)");


And because I am a Firefox fan, please implement Firefox compatibility too adding this line, like here:

$(this).css('-moz-transform',"translate3d(0px, " + now + "px, 0px)");
Solution courtesy of: Ionică Bizău


I think that you may be trying to animate a property that jQuery does not natively support, your best bet is probably to use a plugin such as this: http://ricostacruz.com/jquery.transit/

Instead of then using the .animate function you would use .transition such as follows:

$("#main-nav").transition({ "-webkit-transform": "translate3d(0px, " + e + "px, 0px) scale(1)" });
Discussion courtesy of: Apqu

I do this by animating an arbitrary value then using the step callback to apply some CSS which I have written into a simple method. Perhaps some experts can chime in on why this is good or bad, but it works for me and doesn't force me to install any additional plugins. Here's an example.

In this example I apply a 100px transform then reduce it to 0 using the jQuery .animate() method.

var $elem
  , applyEffect

$elem = $('.some_elements');

applyEffect = function ($e, v) {
    '-webkit-transform': 'translate3d(0px, ' +String(v)+ 'px, 0px)'
  , '-moz-transform': 'translate3d(0px, ' +String(v)+ 'px, 0px)'
  , 'transform': 'translate3d(0px, ' +String(v)+ 'px, 0px)'

applyEffect($elem, 100);

  foo: 100
}, {
  duration: 1000
, step: function (v) {
    applyEffect($elem, 100 - v);
Discussion courtesy of: Ryan Burnette

This recipe can be found in it's original form on Stack Over Flow.