转载地址: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
.
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');
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)");