Compatibility
iOS 3.2+
Android 3.0+
Blackberry 7.0+
(all with the -webkit prefix)
Windows Phone 8 - I don't have details, but
it supports this stuff.
Always test on real devices!
(your simulator lies to you)
stage 1
JavaScript Animations
(ala jQuery.animate())
Changes CSS properties with
setInterval() or requestAnimationFrame()
Cutting-edge circa 2006
[demo]
Stage 2
Absolutely positioned CSS transitions
(left: x; top: y;)
Uses CSS transitions to transform elements
instead of JavaScript.
Cutting-edge circa 2008
This is what most developers still use!
[demo]
stage 3
2D CSS Transformations
(transform: translate(x, y))
Treats states and animations as discrete entities.
Allows efficient repainting and reflow.
Cutting-edge circa 2011
[demo]
stage 4
3D CSS Transformations
(translate3d(x, y, z))
Offloads work onto the GPU.
Avoids flicker from reflow on iOS devices.
Fastest, smoothest animation possible today.
Cutting-edge... now!
[demo]
-webkit-perspective
-
Affects descendents
- 500 - 1000px = reasonable
- smaller = greater perspective
-webkit-perspective: 1000px;
[demo]
-WEBKIT-PERSPECTIVE-ORIGIN
Sets the 'vanishing point'
Defaults to the center of the container
-webkit-perspective-origin: 50% 150px;
[demo]
-webkit-transform
-
translate3d(x, y, z)
- scale3d(sx, sy, sz)
- rotate3d(x, y, z, angle)
*z cannot be a percentage
-webkit-transform: translate3d(0, -10px, 30px);
[demo]
-webkit-transform-origin
Sets the origin ('center point') of transformation
relative to the original border box.
Defaults to 50% 50%.
-webkit-transform-origin: 10px 25%;
[demo]
-webkit-transform-style
Should elements be flattened (3D 'paint' only?)
Or should they share the same 3D environment?
Affects descendants only.
-webkit-transform-style: preserve-3d;
[demo]
-webkit-backface-visibility
Controls whether or not the back sides
of elements are rendered.
Defaults to 'visible'.
'hidden' can give a performance boost.
-webkit-backface-visibility: hidden;
[demo]