Q
Version: 0.12.2

Demo: Transition

this box has a width transition on hover

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

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

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

<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;
}