<div class="box type01"></div>
<div class="box type02"></div>
@mixin transitionDefault($properties...) {
  $transition: ();
  $willChange: ();
  @each $property in $properties {
    // @debug "property: #{type-of($property)}";
    $transition: append($transition, $property 0.2s ease-in-out, $separator: comma);
    $willChange: append($willChange, $property, $separator: comma);
  }
  transition: $transition;
  will-change: $willChange;
}

.box {
  width: 100px;
  height: 100px;
  border: 1px solid;
  opacity: 0.5;
  &.type01 {
    background: #aaa;
  }
  &.type02 {
    width: 50px;
    background: #333;
  }
  &:hover {
    width: 300px;
    opacity: 1;
    @include transitionDefault(width, background, opacity)  
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.