CSS3 Transitions

CSS3 supports a great new feature, the ability to transition between CSS properties without using Javascript. As an example, we’re using it on this site for the change in menu background colour and anchor colour. Try positioning your mouse over the menu options above to see the background fade (Note: not supported in internet explorer)

Syntax

transition: transition-property transition-duration transition-timing-function transition-delay;

transition-property: (required) The property to transition, eg background-color, width transition-duration: (required) The duration of the transition between properties, eg 2s, 200ms transition-timing-function: (optional) See below transition-delay: (optional) The delay before the transition starts, defaults to 0

Please note that all of these properties can also be set individually.

transition-timing-function

Options for this are linear, ease, ease-in, ease-out, ease-in-out or cubic-bezier(n,n,n,n).

ease: (default) Slow start, increasing in speed, then ending slowly ( =cubic-bezier(0.25, 0.1, 0.25, 1) ) linear: Transitions from start to end values at even speed ( =cubic-bezier(0, 0, 1, 1) ) ease-in: Slow start, increasing in speed ( =cubic-bezier(0.42, 0, 1, 1) ) ease-out: Speed decreases to end of transition ( =cubic-bezier(0, 0, 0.58, 1) ) ease-in-out: Slow start and end, faster in middle ( =cubic-bezier(0.42, 0, 0.58, 1) ) cubic-bezier(n,n,n,n): Define your own transition function. n is number from 0 to 1

Example CSS

a {
  /* Set anchor colour to blue */
  color: #00f;

  /* W3C standard, not yet supported by any browser */
  transition: all 0.3s ease-out;

  /* Safari 3.2+, Chrome */
  -webkit-transition: all 0.3s;

  /* FireFox 4+ */
  -moz-transition: all 0.3s;

  /* Opera 10.5+ */
  -o-transition: all 0.3s;

  /* Please note, not yet supported in Internet Explorer */
}

a:hover {
  /* Anchor will now transition in colour to red on mouse hover */
  color: #f00;
}

Links

css3please – Up to date CSS3 examples W3C Transitions Specification – Technical specification for CSS3 transitions


COMMENTS