diff --git a/scss/_variables.scss b/scss/_variables.scss
index 6f9abfa387..ec1ba224de 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -621,6 +621,7 @@ $form-check-padding-left: $form-check-input-width + .5em !defaul
$form-check-margin-bottom: .125rem !default;
$form-check-label-color: null !default;
$form-check-label-cursor: null !default;
+$form-check-transition: background-color .15s ease-in-out, background-position .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
$form-check-input-active-filter: brightness(90%) !default;
@@ -654,8 +655,6 @@ $form-switch-padding-left: $form-switch-width + .5em !default;
$form-switch-bg-image: url("data:image/svg+xml,") !default;
$form-switch-bg-size: contain !default;
$form-switch-border-radius: $form-switch-width !default;
-$form-switch-transition: .2s ease-in-out !default;
-$form-switch-transition-property: background-position, background-color !default;
$form-switch-focus-color: hsla(211, 100%, 75%, 1) !default;
$form-switch-focus-bg-image: url("data:image/svg+xml,") !default;
diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
index 3666b6ab47..572bd547e4 100644
--- a/scss/forms/_form-check.scss
+++ b/scss/forms/_form-check.scss
@@ -23,6 +23,7 @@
border: $form-check-input-border;
appearance: none;
color-adjust: exact; // Keep themed appearance for print
+ @include transition($form-check-transition);
&[type="checkbox"] {
@include border-radius($form-check-input-border-radius);
@@ -119,9 +120,6 @@
background-size: $form-switch-bg-size; // Get a 1px separation
@include border-radius($form-switch-border-radius);
color-adjust: exact; // Keep themed appearance for print
- // Todo: Figure out how to tackle these, with or without mixin?
- // transition: $form-switch-transition;
- // transition-property: $form-switch-transition-property;
&:focus {
background-image: escape-svg($form-switch-focus-bg-image);