jQuery 1.4 Animation Techniques - Index of

CSS3 Animations
translate
translateX
translateY
We learned a lot about the new CSS3 matrix property in this chapter, as well as how to
make use of it with jQuery. Specifically, we learned the following:
We first saw the different values that these functions take and the effects that they
have on elements they are applied to.
We also saw that in order to animate these styles, we can use simple native
JavaScript intervals or timeouts to continuously adjust the function parameters,
or apply them in a rapid sequence.
We learned that mostly, these transform functions can only be applied to elements
individually, with only the last to be defined being applied. The matrix function
however allows us to apply several of the functions to a single element.
We can't rotate and skew a single element, but we can rotate, scale, and translate
an element, or skew, scale, and translate it if we wish. Browser support for CSS3
transforms is very good, with only very minor differences between most browsers
(such as the translate values being in pixels for Firefox and unit-less for Webkitbased
browsers and Opera) except IE.
IE does have its own proprietary implementation of the different transforms,
although these are not implemented in a particularly useful way, such as not being
able to translate elements if we don't want those same elements to be clipped. We
can only hope that IE9, recently released as a beta product, will handle them better.
In addition to CSS3 transforms, a CSS3 transitions specification has also been
proposed, which would allow us to transition elements between different transform
states using pure CSS, without the need for animating them with JavaScript at all.
We didn't look at these at all in this chapter because support for them is restricted
to just Webkit-based browsers or Opera at the time of writing. Beta versions of
Firefox and IE also have support for them, but we have dealt only with fully-released
browsers throughout the book.
We saw that although we can't use the transform functions in jQuery's animate()
method, we can easily create our own animations manually, and we can use them
with other methods, such as the css() method. Don't forget about using cssHooks
to achieve this kind of functionality too.
In the next and final chapter of the book, we'll take a look at a new HTML5 element that
allows us pixel-perfect control over an area on the page—the element—and how
it can be used to create interactive animations.
[ 264 ]