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 "https://compass-style.org/files/beta-sub/examples/compass/css3/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 https://compass-style.org/files/beta-sub/examples/compass/css3/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 {
  -moz-transition-property: width;
  -o-transition-property: width;
  -webkit-transition-property: width;
  transition-property: width;
}
#width:hover {
  width: 80px;
}
#width-duration {
  -moz-transition-property: width;
  -o-transition-property: width;
  -webkit-transition-property: width;
  transition-property: width;
  -moz-transition-duration: 2s;
  -o-transition-duration: 2s;
  -webkit-transition-duration: 2s;
  transition-duration: 2s;
}
#width-duration:hover {
  width: 80px;
}
#width-duration-easein {
  -moz-transition-property: width;
  -o-transition-property: width;
  -webkit-transition-property: width;
  transition-property: width;
  -moz-transition-duration: 2s;
  -o-transition-duration: 2s;
  -webkit-transition-duration: 2s;
  transition-duration: 2s;
  -moz-transition-timing-function: ease-in;
  -o-transition-timing-function: ease-in;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
}
#width-duration-easein:hover {
  width: 80px;
}
#width-delay {
  -moz-transition-property: width;
  -o-transition-property: width;
  -webkit-transition-property: width;
  transition-property: width;
  -moz-transition-delay: 2s;
  -o-transition-delay: 2s;
  -webkit-transition-delay: 2s;
  transition-delay: 2s;
}
#width-delay:hover {
  width: 80px;
}