diff --git a/src/components/base/form/form_checkbox/form_checkbox.scss b/src/components/base/form/form_checkbox/form_checkbox.scss
index 5b7e33a66776191ee88a3992293239918fa81d69..99ba6d7cbf25c27f9e936b81945e16d7ebb9048b 100644
--- a/src/components/base/form/form_checkbox/form_checkbox.scss
+++ b/src/components/base/form/form_checkbox/form_checkbox.scss
@@ -63,11 +63,44 @@
       &::after {
         top: 0;
         left: -$gl-spacing-scale-5;
+        @include gl-prefers-reduced-motion-transition;
       }
+    }
+
+    .custom-control-input[type='checkbox'] ~ .custom-control-label {
+      &::before {
+        background-color: var(--gl-control-background-color-default);
+        border-color: var(--gl-control-border-color-default);
+        transition: background-color $gl-transition-duration-medium .15s $gl-easing-out-cubic,
+                    border-color $gl-transition-duration-medium .15s $gl-easing-out-cubic,
+                    box-shadow $gl-transition-duration-medium $gl-easing-out-cubic;
+      }
+
+      &::after {
+        background: 50% 50% no-repeat;
+        background-color: var(--gl-control-indicator-color-selected);
+        mask-repeat: no-repeat;
+        mask-position: center center;
+        mask-image: url('#{$gl-icon-check}');
+        clip-path: polygon(100% 100%, 100% 0%, 100% 0%, 100% 0%);
+        transition: clip-path $gl-transition-duration-medium $gl-easing-out-cubic;
+      }
+    }
 
+    .custom-control-input[type='radio'] ~ .custom-control-label {
       &::before {
         background-color: var(--gl-control-background-color-default);
         border-color: var(--gl-control-border-color-default);
+        transition: background-color $gl-transition-duration-medium $gl-easing-out-cubic,
+                    border-color $gl-transition-duration-medium $gl-easing-out-cubic,
+                    box-shadow $gl-transition-duration-medium $gl-easing-out-cubic;
+      }
+
+      &::after {
+        background-color: var(--gl-control-indicator-color-selected);
+        border-radius: 50%;
+        scale: 0;
+        transition: scale $gl-transition-duration-medium .1s $gl-easing-out-cubic;
       }
     }
 
@@ -83,6 +116,7 @@
     .custom-control-input:checked  ~ .custom-control-label::before {
       background-color: var(--gl-control-background-color-selected-default);
       border-color: var(--gl-control-border-color-selected-default);
+      transition-delay: -.2s;
 
       @media (forced-colors: active) {
         background-color: LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
@@ -90,30 +124,18 @@
       }
     }
 
-    .custom-control-input[type='checkbox']:checked ~ .custom-control-label,
-    .custom-control-input[type='checkbox']:indeterminate ~ .custom-control-label,
-    .custom-control-input[type='radio']:checked ~ .custom-control-label {
-      &::after {
-        background: 50% 50% no-repeat;
-        background-color: var(--gl-control-indicator-color-selected);
-        mask-repeat: no-repeat;
-        mask-position: center center;
-      }
-    }
-
     .custom-control-input[type='checkbox']:checked ~ .custom-control-label::after {
-      background-color: var(--gl-control-indicator-color-selected);
       mask-image: url('#{$gl-icon-check}');
+      clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
     }
 
     .custom-control-input[type='checkbox']:indeterminate ~ .custom-control-label::after {
-      background-color: var(--gl-control-indicator-color-selected);
       mask-image: url('#{$gl-icon-indeterminate}');
+      clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
     }
 
     .custom-control-input[type='radio']:checked ~ .custom-control-label::after {
-      background-color: var(--gl-control-indicator-color-selected);
-      mask-image: url('#{$gl-icon-radio}');
+      scale: .5;
     }
 
     .custom-control-input:not(:disabled):checked ~ .custom-control-label:hover,