_transition

transition プロパティを容易に指定できるようにします。

引数型初期値説明
@include _transition($transitions...);
$transitionsList.3stransition プロパティの値

初期値

引数を指定しない場合は、$_transition 変数に指定された初期値が使われます。

.element {
  @include _transition;
}

.element {
  transition: 0.3s;
}
@media screen and (prefers-reduced-motion: reduce) {
  .element {
    transition: none;
  }
}

複数の値

カンマ区切りでプロパティごとに指定できます。

.element {
  @include _transition(color .3s, background-color .2s linear);
}

.element {
  transition: color 0.3s, background-color 0.2s linear;
}
@media screen and (prefers-reduced-motion: reduce) {
  .element {
    transition: none;
  }
}