Bug Tracker

Opened 13 years ago

Last modified 10 years ago

#4171 closed feature

Allow animation of CSS Transform Properties — at Version 8

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 ajpiano)

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 (8)

comment:1 Changed 13 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 11 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 11 years ago by john

Milestone: 1.3.21.next
Resolution: wontfix
Status: closedreopened

Re-opening for 1.7 discussion.

comment:4 Changed 11 years ago by john

Keywords: 1.7-discuss added

Nominating ticket for 1.7 discussion.

comment:5 Changed 11 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 11 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 11 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 11 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...

Note: See TracTickets for help on using tickets.