jQuery animate a -webkit-transform

转载地址:http://stackoverflow.com/questions/16958873/jquery-animate-a-webkit-transform

CSS:

#box {
   width:100px;
   height:100px;
   position:absolute;
   top:100px;
   left:100px; 
   text-indent: 90px;
   background-color:red;
}

JS:

$('#box').animate({  textIndent: 0 }, {
    step: function(now,fx) {
      $(this).css('-webkit-transform','rotate('+now+'deg)'); 
    },
    duration:'slow'
},'linear');

$(".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)");