<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.