.timing-linear {
  transition-timing-function: linear;
}
.timing-ease-in {
  transition-timing-function: ease-in;
}
.timing-ease-in-out {
  transition-timing-function: ease-in-out;
}
.timing-ease-out {
  transition-timing-function: ease-out;
}

@for $i from 1 through $lop-size {
  $duration: $i * 50;
  .duration-#{$duration} {
    transition-duration: #{$duration}ms;
  }
}

.trasition-all {
  transition-property: all;
}
.transition-colors {
  transition-property: color, background-color, border-color;
}
.transition-width {
  transition-property: width;
}
.transition-height {
  transition-property: height;
}
.transition-size {
  transition-property: width;
  transition-property: height;
}