CSS Transitions

How to use transitions

If you haven't used transitions before, here's a brief introduction.

On the element you want to have animate, add the following CSS:

#id_of_element {
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

There is a lot of duplication due to vendor prefixes - until the specification if finalised, this will persist. If this bothers you, there are various tools such as CSS Scaffold, LESS, or my preference - SASS, that allow you to define mixins to avoid repetitive code.

Another approach is simply to write the CSS without the prefixes, then use Lea Verou's -prefix-free to add them in at runtime.

Something you definitely shouldn't do is to only include the webkit prefix. Tempting though it seems, particularly when developing for mobile devices, webkit isn't the only rendering engine!

It's worth noting as well that there isn't an -ms- prefix on these properties. IE10 was the first browser to ship without a prefix on these. The betas of IE10 did use the prefix however, so you may see code using -ms-. It's not needed though.

The syntax is pretty straightforward, you specify the property you want to animate, all or border-radius or color or whatever, the time to run, then the transition timing function. The options for the timing function are shown below.

Whenever any property changes, then it will animate instead of changing directly. This can be due to a different set of properties set on a pseudo class such as hover, or a new class or properties set by javascript. The example below uses :hover to change the properties – no javascript is needed.

To see the difference in speed, have a look at the speed test.

Different timing functions

Ease

Ease
In

Ease
Out

Ease
In Out

Linear

Custom

Awesome!

Hover on me

In addition to the built in timing functions, you can also specify your own. The excellent Ceaser CSS Easing Tool makes this very easy.

It's worth noting that the curves you produce can have negative values in them. The bezier curve for the last box above iscubic-bezier(1.000, -0.530, 0.405, 1.425), the negative values are causing it to 'take a run up', which looks pretty awesome!

Delays

The syntax for a CSS3 transition is of the form:

transition:  [ <transition-property> ||
               <transition-duration> ||
               <transition-timing-function> ||
               <transition-delay> ]

You will notice the final parameter is a delay - this let's you trigger things after an event has occurred. Below is a small demo showing this functionality.

Transition delays

Hover on me

This works by just adding a delay to each of the different circles. This is as easy as adding a transition-delay: 0.6s; to the element.

Advanced delays

You can set the way different properties animate differently. In this example the normal (blue) circle has this CSS (with the appropriate vendor prefixes):

#dd_main2 {
  transition: all 1s ease-in-out;
}

The 'Example 1' (green) circle has this CSS instead:

#dd_main2 {
  transition-property: top, left;
  transition-duration: 1s, 1s;
  transition-delay: 0s, 1s;
}

While the 'Example 2' (red) circle has this CSS instead:

#dd_main2 {
  transition-property: top, left, border-radius, background-color;
  transition-duration: 2s, 1s, 0.5s, 0.5s;
  transition-delay: 0s, 0.5s, 1s, 1.5s;
}

This allows us to animate the properties independently of each other, meaning that this simple technique can be used to create very complex animations.

Normal

Example 1

Example 2

Hover on me

Animatable properties

Regarding the properties you can animate, the best way is to experiment. The W3C maintain a list of properties that can be animated on the CSS Transitions spec. These include everything from background-color and letter-spacing to text-shadow and min-height. Many of these properties are not supported by default by jQuery animation, making CSS transitions much more useful out of the box. In addition, many browsers hardware accelerate animations that don't require repaints, namely opacity, 3D transforms and filters. To see the methods that Webkit accelerates, take a look at the AnimationBase.cpp code from the Webkit source. At the time of writing there are three classes defined here: PropertyWrapperAcceleratedOpacity,PropertyWrapperAcceleratedTransform and PropertyWrapperAcceleratedFilter. These are the animations that Webkit accelerates. Other browsers do things differently, but as Webkit is popular on mobile where these things matter most, it's worth noting this special case.

In reality, browsers are allowing more properties than these to be animated - box-shadow springs to mind as an obvious example. The table below is taken from the link above, and can be considered the minimum number of properties you would expect to be animatable.

Property Name	Type
background-color	color
background-image	only gradients
background-position	percentage, length
border-bottom-color	color
border-bottom-width	length
border-color	color
border-left-color	color
border-left-width	length
border-right-color	color
border-right-width	length
border-spacing	length
border-top-color	color
border-top-width	length
border-width	length
bottom	length, percentage
color	color
crop	rectangle
font-size	length, percentage
font-weight	number
grid-*	various
height	length, percentage
left	length, percentage
letter-spacing	length
line-height	number, length, percentage
margin-bottom	length
margin-left	length
margin-right	length
margin-top	length
max-height	length, percentage
max-width	length, percentage
min-height	length, percentage
min-width	length, percentage
opacity	number
outline-color	color
outline-offset	integer
outline-width	length
padding-bottom	length
padding-left	length
padding-right	length
padding-top	length
right	length, percentage
text-indent	length, percentage
text-shadow	shadow
top	length, percentage
vertical-align	keywords, length, percentage
visibility	visibility
width	length, percentage
word-spacing	length, percentage
z-index	integer
zoom	number

In addition to this, all browsers with transitions support animating CSS transforms, which proves to be invaluable.

To find out more about CSS3 transitions, read through the W3C specification.

How to use transforms

There are two categories of transform - 2D transforms and 3D transforms. 2D transforms are more widely supported, whereas 3D transforms are only in newer browers.

2D examples

This div has been skewed - note that the text is still selectable.

This div has been scaled - again, the text is real text.

This div has been rotated - you get the idea about the text!

This div has been translated 10px down, and 20px across.

This div has all four types!

The code for these looks like this, but with the appropriate vendor prefixes added:

#skew {
  transform:skew(35deg);
}
#scale {
  transform:scale(1,0.5);
}
#rotate {
  transform:rotate(45deg);
}
#translate {
  transform:translate(10px, 20px);
}
#rotate-skew-scale-translate {
  transform:skew(30deg) scale(1.1,1.1) rotate(40deg) translate(10px, 20px);
}

CSS transforms also be animated using transitions - try hovering on the div below.

Hover on me and I'll spin and scale!

CSS 3D Transforms

Browser Support for 3D CSS Transforms

12.0

4.0

10.0

10.0

-

3D CSS transforms are similar to 2D CSS transforms. The basic properties are translate3d, scale3d, rotateX, rotateY androtateZ. translate3d and scale3d take three arguments for x,y and z, whereas the rotates just take an angle. Here are some examples:

rotateX

rotateY

rotateZ

Hover me

The simplified code for those looks like this:

#transDemo4 div {
  transition:all 2s ease-in-out;
  perspective: 800px;
  perspective-origin: 50% 100px;
}
#transDemo4:hover #rotateX {
  transform:rotateX(180deg);
}
#transDemo4:hover #rotateY {
  transform:rotateY(180deg);
}
#transDemo4:hover #rotateZ {
  transform:rotateZ(180deg);
}

A cube made with 3D CSS transforms

1

2

3

4

5

6

X rotation (0 deg)Y rotation (0 deg)Z rotation (0 deg)Perspective (800 px)

Have a play with the controls - there's no transition here, just the sliders to control it. Note that I'm only using javascript to update the css values - all the maths needed is done by the browser automatically.

A 3D image slider

Note that because of the way a cube works, the image is moved out towards the screen, and is bigger than it should be. You should move it back by half the width of an image to make sure it is normal size.

Image 1 Image 2 Image 3 Image 4

Click me to toggle transparency

3D transforms playground

Original

Transformed

∆X (0 px)∆Y (0 px)∆Z (0 px)X rotation (0 deg)Y rotation (0 deg)Z rotation (0 deg)Perspective (800 px)Transform origin (horizontal) (50 %)Transform origin (vertical) (50 %)

For more information read both the Webkit blog entry from when 3D transforms were first implemented, David Desandro's awesome examples and Microsoft's 3D transforms test drive.

Advanced usage

Though it's rare that you'll need it, it's worth noting that the raw matrix implementations are exposed as well. As an example, the skew transform above has a skew of 35 degrees. To find the internal representation, you can use javascript to find the computed style. In this case, skew(35deg) is represented by matrix(1, 0, 0.7002075382097097, 1, 0, 0). The astute among you will note that this is a 2×3 matrix. To use them for normal arithmetic, add a third row of 0, 0, 1.

CSS 3D transforms are represented similarly, with a 4×4 matrix.

Understanding how to create these matrices is probably out of the scope of this tutorial, but an undergraduate understanding of matrix algebra should suffice. Read the Wikipedia article on transformation matrices for a quick primer.

For the exact methods, read the part of the spec about 2D matrix decomposition and 3D matrix interface.

How to use CSS3 animation

The CSS animation feature was introduced into Webkit in 2007. In 2009 a working draft was written and added to the w3c site. Over the next three years support was gained by Firefox, Internet Explorer and finally Opera.

To use CSS animation, you first specify some keyframes for the animation - basically what styles will the element have at certain times. The browser does the tweening for you.

Demo

Hover over me

Code

The interesting bit of this code is this bit of CSS (remember to add vendor prefixes both for the keyframes code and the animation-* properties):

@keyframes resize {
  0% {
    padding: 0;
  }
  50% {
    padding: 0 20px;
    background-color:rgba(255,0,0,0.2);
  }
  100% {
    padding: 0 100px;
    background-color:rgba(255,0,0,0.9);
  }
}

#box {
  animation-name: resize;
  animation-duration: 1s;
  animation-iteration-count: 4;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

Note that the 4 iterations makes the box pulse twice - the animation runs forwards then backwards, then forwards then backwards.

You can have as many keyframes as you like, at whatever intervals you like.

A useful setting is to set animation-iteration-count to infinite, making the animation continue for ever.

Demo

The key to using these animations is subtlety - nice delicate animations, rather than extreme over the top ones! It's also worth noting that the WCAG (Web Content Accessibility Guidelines) 2.0 specifies that a website shouldn't contain things that flash more than 3 times a second to avoid causing seizures in people susceptible to them.