Sass and Compass for Designers

Transitions

One final Compass mixin to share with you is the transitions mixin. It allows an easy cross-browser way to use CSS transitions. Here's an example of the mixin in action:

@include single-transition(all, .3s, ease, 0s);

Again, it follows the same basic syntax as the W3C transition syntax (http://www.w3.org/TR/css3-transitions/).

Inside the parenthesis, the first value is the property to be transitioned (all in this instance), then the duration of the transition, next is the timing method (ease in this instance), and finally the transition delay. We'll add that to the header links to make a smooth transition to the hover-based styles.

As ever, Compass provides a full vendor-prefixed stack in the CSS, here's the output of the single-transition ...