CSS: Animation Using CSS Transform

This is a partial re-post of a super helpful article I found online. Click here to see the original post in it's entirety.

The examples on this page will work properly in Safari, Chrome and Opera. In Firefox prior to version 4 you will see the transforms, but without any animation. Transformation effects also work now in Internet Explorer 9 using the -ms-vendor prefix.

The implementation of animation in CSS involves setting up a transformation to take place in response to a mouseover or other event. Then, rather than applying the effect instantly, we assign a transition timing function which applies the transformation/s over a set time period.

Firefox and Opera now support these transforms with an almost identical syntax - just replace -webkit- with -moz- or -o- in the examples below and you will see the same effects.

IE10 Stable now support transitions with no prefix. In IE10 Preview the -ms- prefix was required for transitions. Transforms in all version of IE10 still require the prefix.

  Introducing CSS Transformations

The effect of a CSS Transform is to modify the appearance of an element in the browser by translation, rotation or other means. When defined in a style sheet transformations are applied before the page is rendered, so you don't actually see any animations taking place. Transforms can also be applied as a mouseover or similar effect which you can see in the next section.

Apple's proposal for CSS Transformations calls for the ability to change the perspective and work in three dimensions, but that's some way away yet. Even the features demonstrated here won't appear in other browsers until they're approved by the standards body who are still quibbling over CSS3 modules.

Below we've placed four identical DIV's styled as a 100 x 60 pixel box with a 2 pixel border. Subsequently, each element has been transformed in some way using the -webkit-transformproperty as follows:

box 1	Translated to the right: -webkit-transform: translate(3em,0);
box 2	Rotated 30 degrees with the clock: -webkit-transform: rotate(30deg);
box 3	Translated to the left and down: -webkit-transform: translate(-3em,1em);
box 4	Scaled to twice its original size: -webkit-transform: scale(2);

box 1

box 2

box 3

box 4

Without the translations, and the red border on the second box, you would see just four identical boxes labelled one through four. What you see in supported browsers (Safari, Chrome, Firefox, Opera), however, will be more like this:

 

Of note is the fact that the text is still selectable in transformed elements, even when rotated, and that scaling an element affects properties including border widths and font sizes and not just the box dimensions.

  Animating your Transforms

While CSS Transformation in itself is a powerful tool for developers (though I shudder to think what would happen if it was more widely available), the ability to animate the same effects using-webkit-transition is far more exciting. Move your mouse over the following four boxes for a demonstration:

box 1

box 2

box 3

box 4

What you see above is the four boxes from the previous section, in their default states. When you mouseover any of the boxes, however, the CSS transformation is applied as a one second animation. When the mouse moves away the animation is reversed, taking each box back to its original state.

And we can do this without using JavaScript - only HTML and CSS! Here is the complete code for 'box 1' which slides to the right and back:

<style type="text/css"> .showbox { float: left; margin: 4em 1em; width: 100px; height: 60px; border: 2px solid green; background-color: #fff; line-height: 60px; text-align: center; -webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out; -o-transition: 1s ease-in-out; transition: 1s ease-in-out; } .slideright:hover { -webkit-transform: translate(3em,0); -moz-transform: translate(3em,0); -o-transform: translate(3em,0); -ms-transform: translate(3em,0); transform: translate(3em,0); } </style> <div class="showbox slideright">box 1</div>

If you think that's cool, realise that CSS Animation can be applied not just to the transforms, but also to other CSS properties including: opacity, colour and a bunch of others.

In the next example the box on the left begins as small and green with square corners, while the one on the right is larger, with a red border and rounded corners. Hovering over either of the boxes will trigger an animation that makes box 1 take on the appearance of box 2 and vice versa.

box 1

box 2

Again, we're still only using HTML and CSS to make this happen. Without CSS Transforms the two boxes will still change their border-color, and possibly also the border-radius, but it happens immediately rather than as a one second animation.

For more advanced examples you can read our new article on using JavaScript to trigger the animation.

  Hover over one element to affect another

A couple of people have asked about triggering animations in relation to a click or hover event elsewhere on the page. With JavaScript this can be done by using an event handler to set or change the className of the element to be animated, and to have a transformation or keyframes associated with the new class.

Using CSS there are some options for targeting related elements. These involve selectors such as the> (child), + (adjacent sibling) and ~ (general sibling) combinators.

The preceding examples all required a direct hover event either on the element itself or on its container, wheras in this example the blue box is animated only when you hover over its sibing, the red box:

#box1

#box2

#stage2

The relevant CSS code is as follows. Note that we are using the + adjacent sibling combinator to target#box2 when #box1 experiences a hover event. The ~ combinator may be more flexible in letting you target elements that are further away from the triggering element (some examples).

<style type="text/css"> #box2 { position: absolute; left: 120px; ... background: blue; ... -webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out; -o-transition: 1s ease-in-out; transition: 1s ease-in-out; } #box1:hover + #box2 { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); left: calc(100% - 102px); background: yellow; } </style>

Internet Explorer 11 fails trying to animate when the values have been assigned usingcalc(). You will need to use a fixed value instead.