CSS3 Demos

• Home
• Backgrounds
• Rounded Corners
• Drop Shadows
• Transparency
• Transitions and Transforms
• Animations
• Columns
• Generated Content
• Custom Fonts
• Media Queries
• CSS3 Selectors

Transitions and Transforms

We are now moving further out... For the first time it's becoming possible to animate and transform content without having to use JavaScript. A lot of simple hide/show and animation functionality is made much easier by the new CSS3 properties, which is all to the good. Usually you'll want to retain the JS for backwards compatibility (pretty much IE8 or earlier). The below properties are active when an element changes state; see this section for true animations that are independent of user actions.

Transitions

CSS allows for various circumstances where an element can 'react' to a user by changing properties, most of which will already be familiar - :hover, :active, :visited and :focus, for example. There are also the newer pseudo-selectors e.g :required, :disabled, :checked and :target - which may be less familiar. The latter set are probably more versatile, and :target in particular can be used as the trigger for all manner of user-initiated animations (as long as you don't mind the unavoidable page jump).

Via CSS3 Transitions, the change of state when a pseudo-selector suddenly applies can now be made less sudden. The syntax is simple enough - the property to animate, the duration of the animation and any timing function. A simple example might be background 1s ease, which would animate any change to the element's background property over a period of 1 second, starting slowly then speeding up towards the end.

Note that the transition property is appied to the element selector, not to the pseudo-selector that triggers the animation.

Not all properties can be animated - the list varies from browser to browser. Here's Gecko/Firefox's supported list, for example. You can use the keyword 'all' to transition every available property, as in all 1s linear.

The timing functions are also quite detailed - again, here's Mozilla's list. If unspecified, they default to ease, which often seems to do the trick anyway...

Transforms (2D)

Pioneered by the Webkit engine which powers Safari and Chrome, CSS3 transforms now allow the designer to further rotate, scale and translate (shift) elements.

The simpler 2D transform properties are now available to Opera (v.10.5+) and Firefox (v.4+), and will be supported in IE9.

The three transform sub-declarations each have their own properties: rotate takes a degree property (positive or negative), translate takes two measures (from top and from left, much like relative positioning) and scale takes two proportional measures (width and height). The examples show one of each, although you can also combine the lot, as in transform: scale(1.5,1.5) rotate(20deg) translate(15px, 30px);

By default, transforms are calculated from the mid-point of the element. This can be changed with the transform-origin property, which has values like background-position, e.g. 0 100%. See example#6 below.

Note! It's also possible to combine transitions and transforms, so that content reacts to a change of state with an animated transformation.

Transforms (3D)

Somewhat more complex than 2d transforms, the 3D versions work in Chrome, Safari and Firefox 10+, and will be supported in IE10.

Here we are moving into the area of (perhaps brain-fuddling) issues of perspective and the like. On the face of it, the 3d transforms just add another value to the properties to account for the third dimension, but there's some tricky concepts to grasp. The first might be the idea of adding a property to the parent container of the transformed elements: (-moz-)perspective.

Perspective can be specified in px; the lower the value, the closer to the screen the user's perspective will seem to be, and therefore the more radical each transform will appear. Values of 700+ pixels seem to give the most palatable results. There's also a perspective-origin property, again with vendor prefixes as necessary, which allows the vanishing point of transformed elements to be shifted.

Secondarily: normally, as an element rotates, the back of it becomes viewable. If this needs to be different, there's a backface-visibility property (vendor-prefixed) - set it to hidden and the element will vanish as it turns towards 180 degrees.

Otherwise, a little experimentation with all three values for the 3d variants of transform will be useful. They're rotateY, scale3d and translate3d. All three are shown in use below: