Demo: Transition

<p>
  this box has a width transition on hover
</p>
<div class='transition-example' id='width'></div>
<p>
  this box has a width transition on hover, with a set duration
</p>
<div class='transition-example' id='width-duration'></div>
<p>
  this box has a width transition on hover, with a set duration, and uses the 'easein' timing function
</p>
<div class='transition-example' id='width-duration-easein'></div>
<p>
  this box has a few seconds delay, so wait a little before the transition occurs
</p>
<div class='transition-example' id='width-delay'></div>

%p
  this box has a width transition on hover

#width.transition-example

%p
  this box has a width transition on hover, with a set duration

#width-duration.transition-example

%p
  this box has a width transition on hover, with a set duration, and uses the 'easein' timing function

#width-duration-easein.transition-example

%p
  this box has a few seconds delay, so wait a little before the transition occurs

#width-delay.transition-example

@import "compass/css3";

.transition-example {
  width: 40px;
  height: 40px;
  background: red;
  margin: 20px;
}

#width {
  @include transition-property(width);
}

#width:hover {
  width: 80px;
}

#width-duration {
  @include transition-property(width);
  @include transition-duration(2s);
}

#width-duration:hover {
  width: 80px;
}

#width-duration-easein {
  @include transition-property(width);
  @include transition-duration(2s);
  @include transition-timing-function(ease-in);
}

#width-duration-easein:hover {
  width: 80px;
}

#width-delay {
  @include transition-property(width);
  @include transition-delay(2s);
}

#width-delay:hover {
  width: 80px;
}

@import compass/css3

.transition-example
  width: 40px
  height: 40px
  background: red
  margin: 20px

#width
  +transition-property(width)

#width:hover
  width: 80px

#width-duration
  +transition-property(width)
  +transition-duration(2s)

#width-duration:hover
  width: 80px

#width-duration-easein
  +transition-property(width)
  +transition-duration(2s)
  +transition-timing-function(ease-in)

#width-duration-easein:hover
  width: 80px

#width-delay
  +transition-property(width)
  +transition-delay(2s)

#width-delay:hover
  width: 80px

.transition-example{width:40px;height:40px;background:red;margin:20px}#width{-webkit-transition-property:width;-moz-transition-property:width;-o-transition-property:width;transition-property:width}#width:hover{width:80px}#width-duration{-webkit-transition-property:width;-moz-transition-property:width;-o-transition-property:width;transition-property:width;-webkit-transition-duration:2s;-moz-transition-duration:2s;-o-transition-duration:2s;transition-duration:2s}#width-duration:hover{width:80px}#width-duration-easein{-webkit-transition-property:width;-moz-transition-property:width;-o-transition-property:width;transition-property:width;-webkit-transition-duration:2s;-moz-transition-duration:2s;-o-transition-duration:2s;transition-duration:2s;-webkit-transition-timing-function:ease-in;-moz-transition-timing-function:ease-in;-o-transition-timing-function:ease-in;transition-timing-function:ease-in}#width-duration-easein:hover{width:80px}#width-delay{-webkit-transition-property:width;-moz-transition-property:width;-o-transition-property:width;transition-property:width;-webkit-transition-delay:2s;-moz-transition-delay:2s;-o-transition-delay:2s;transition-delay:2s}#width-delay:hover{width:80px}