javascript - jQuery animate a -webkit-transform

Question

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.

Answer 1

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)");
    },
    duration:'slow'
},'linear');

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

JSFIDDLE

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)");
    },
    duration:'slow'
},'linear');

JSFIDDLE

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