heroheman
7/16/2012 - 9:32 AM

LESS: Transition Mixins

LESS: Transition Mixins

.transition(@duration:0.2s, @ease:ease-in-out) {
  -webkit-transition: all @duration @ease;
  -moz-transition: all @duration @ease;
  -o-transition: all @duration @ease;
  -ms-transition: all @duration @ease;
  transition: all @duration @ease;
}

.transition-duration(@duration: 0.2s) {
  -moz-transition-duration: @duration;
  -webkit-transition-duration: @duration;
  transition-duration: @duration;
}
.transition-delay(@delay: 0.2s) {
  -moz-transition-delay: @delay;
  -webkit-transition-delay: @delay;
  transition-delay: @delay;
}

.transition-property(@property: all) {
-moz-transition-property: @property;
-webkit-transition-property: @property;
transition-property: @property;
}

.transition-timing(@timing: ease-in-out) {
  -webkit-transition-timing-function: @timing;
  -moz-transition-timing-function: @timing;
  -o-transition-timing-function: @timing;
  -ms-transition-timing-function: @timing;
  transition-timing-function: @timing;
}