Animate prefixed CSS rules in jQuery

Question

I'm trying to animate a -webkit-transform rule. I tried:

element.children().animate('webkitTransform': "translate3d(200px, 0, 0)", 200);
element.children().animate('WebkitTransform': "translate3d(200px, 0, 0)", 200);
element.children().animate('-webkit-transform': "translate3d(200px, 0, 0)", 200);

What am I missing?

Applying the CSS without animation works fine:

element.children().css('-webkit-transform', "translate3d(200px, 0, 0)");

Animate also works if I animate a non prefixed property like margin-left, etc.

Max Al Farakh · Accepted Answer · 2014-04-18 16:45:14Z

2

You can't animate this particular property since it is not numeric. Prefixes have nothing to do with that. From the docs:

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality

answered Apr 18, 2014 at 16:45

Max Al Farakh

4,4964 gold badges31 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bill Criswell · Accepted Answer · 2014-04-18 16:45:10Z

1

That is invalid Javascript. The first parameter needs to be an object. I still don't believe you can animate this property even with the right syntax.

element.children().animate({webkitTransform: "translate3d(200px, 0, 0)"}, 200);

This article may be able to help you out, though: http://cameronspear.com/blog/animating-translate3d-with-jquery/

answered Apr 18, 2014 at 16:45

Bill Criswell

33k8 gold badges80 silver badges68 bronze badges

Collectives™ on Stack Overflow

Animate prefixed CSS rules in jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related