Bug Tracker

Opened 11 years ago

Last modified 8 years ago

#4171 closed feature

Allow animation of CSS Transform Properties — at Version 9

Reported by: zachstronaut Owned by:
Priority: low Milestone: 1.next
Component: effects Version: 1.6.1
Keywords: css, transform, animate, animation, 1.7-discuss Cc:
Blocked by: Blocking:

Description (last modified by timmywil)

WebKit/Safari and Firefox 3.1+ support CSS Transformations including skew, rotate, and scale. The following jQuery animation code does not work as expected in Safari:

$('p').click(function () {

$(this).animate({WebkitTransform: 'rotate(15deg)'}, 1000);


For Firefox 3.1+ the property is actually MozTransform instead. Ideally, jQuery would internally make the distinction between WebkitTransform and MozTransform and animating these CSS properties could simply be invoked with code such as:

$('p').click(function () {

$(this).animate({transform: 'rotate(15deg)'}, 1000);


Change History (9)

comment:1 Changed 11 years ago by dantman

jQuery won't add support for this since it doesn't work cross browser.

I have plans to improve jQuery to support extension of .css(); after I code that I'll be making an extension to add borderRadius support, and potentially transform support. I'll probably also end up setting up support for transform animation.

Note that transform isn't something very easy to animate, there are a number of possible transformation types (matrix: rotate, translate, scale, skew) and just like in matrix transformations these build on top of each other in complex ways.

Animating 'rotate(25deg)' to something like 'transform(25px,25px) rotate(50deg)' might not be to simple. I'll have to do some testing.

comment:2 Changed 10 years ago by ajpiano

Resolution: wontfix
Status: newclosed

This canm now be accomplished with a plugin that leverages jQuery's new cssHooks implementation. That is how jQuery plans to support CSS3 going forward, rather than inclusion in core.

comment:3 Changed 9 years ago by john

Milestone: 1.3.21.next
Resolution: wontfix
Status: closedreopened

Re-opening for 1.7 discussion.

comment:4 Changed 9 years ago by john

Keywords: 1.7-discuss added

Nominating ticket for 1.7 discussion.

comment:5 Changed 9 years ago by dmethvin

+0, Needs to be part of an overall .animate() rewrite with CSS3 animations in mind. Not sure if this is the right time to do it.

comment:6 Changed 9 years ago by Rick Waldron

Description: modified (diff)

+0, Seems like a lot of code. Could this begin life as a plugin?

comment:7 Changed 9 years ago by jaubourg

+0, I think we should simply cssHook these properties (without the transform key, let's use "rotate" and "scale" directly)

comment:8 Changed 9 years ago by ajpiano

Description: modified (diff)

-1, Should use cssHooks - moreover, how does it even make sense to "animate" the property that defines a CSS transform...

comment:9 Changed 9 years ago by timmywil

Description: modified (diff)

-1, cssHooks

Note: See TracTickets for help on using tickets.