Bug Tracker

Opened 11 years ago

Last modified 8 years ago

#4171 closed feature

Allow animation of CSS Transform Properties — at Version 11

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

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

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
Version: 1.3.11.6.1

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

comment:10 Changed 9 years ago by zachstronaut

Why does animating the CSS 'width' property belong in jQuery core but animating the CSS 'transform' property should be cssHooks? This sounds completely arbitrary to me. It also seems very shortsighted. CSS Transforms are now supported by IE9+, Opera, Firefox 3.5+, Chrome, and Safari, and they are exactly the kind of thing that cutting edge web developers and designers are going to want to include and to animate in their designs.

Also, CSS Transitions and Animations will soon make redundant all of jQuery's animation functionality. If you're going to exclude support for some CSS properties in jQuery core, maybe all of jQuery animation should be removed from core and stand alone as a plugin to reduce the weight of jQuery.

The demand for CSS Transform support is going to grow exponentially, so it is hard to argue for it being excluded from jQuery core on grounds that it is too niche. If you want to argue that it is acceptable for people to include it as a plugin, then why not make all of jQuery animate a plugin for those of us who don't need any of the animate functionality on some projects.

@ajpiano How does it not make sense to animate a CSS transform? I do it all the time with my jQuery patch that enables this: http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html

comment:11 Changed 9 years ago by addyosmani

Description: modified (diff)

-1, only because as per dmethvin this should probably be done as part of a wider re-write of .animate() to use CSS3 transitions, whether addressed on this roadmap or the next.

Note: See TracTickets for help on using tickets.