Skip to main content

Automatic Transition Wrapper

Stop writing transition: all 0.3s ease-in-out on every hover. Use a mixin that defaults to your brand's specific timing and easing curves.

SCSS
$standard-ease: cubic-bezier(0.4, 0, 0.2, 1);
$fast: 150ms;

@mixin transition($props...) {
  $result: ();
  @each $prop in $props {
    $result: append($result, $prop $fast $standard-ease, comma);
  }
  transition: $result;
}

.link { @include transition(color, transform); }