diff --git a/packages/@adobe/spectrum-css-temp/components/checkbox/index.css b/packages/@adobe/spectrum-css-temp/components/checkbox/index.css
index 325bfdcb300..7aae08707b1 100644
--- a/packages/@adobe/spectrum-css-temp/components/checkbox/index.css
+++ b/packages/@adobe/spectrum-css-temp/components/checkbox/index.css
@@ -166,7 +166,7 @@ governing permissions and limitations under the License.
     margin: var(--spectrum-alias-focus-ring-gap);
     transform: translateX(0);
 
-    transition: box-shadow var(--spectrum-global-animation-duration-100) ease-out,
+    transition: opacity var(--spectrum-global-animation-duration-100) ease-out,
                 margin var(--spectrum-global-animation-duration-100) ease-out;
   }
 }
diff --git a/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css b/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css
index ecd0d374b11..d6337ed72c7 100644
--- a/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css
+++ b/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css
@@ -103,12 +103,18 @@ governing permissions and limitations under the License.
 
 /* Focus */
 .spectrum-Checkbox-input {
+  & + .spectrum-Checkbox-box {
+    &:after {
+      box-shadow: 0 0 0 var(--spectrum-checkbox-focus-ring-size-key-focus) var(--spectrum-checkbox-focus-ring-color-key-focus);
+      opacity: 0;
+    }
+  }
   &:focus-ring + .spectrum-Checkbox-box {
     &:before {
       border-color: var(--spectrum-checkbox-box-border-color-key-focus);
     }
     &:after {
-      box-shadow: 0 0 0 var(--spectrum-checkbox-focus-ring-size-key-focus) var(--spectrum-checkbox-focus-ring-color-key-focus);
+      opacity: 1;
     }
   }
   .spectrum-Checkbox.is-indeterminate &,