Integrate PR #829 from @shannabarnard into v4-dev

scss/_checkboxes.scss

@@ -50,10 +50,15 @@ label.checkbox-inline {
         0 0 0 0,
         0 0 0 0 inset;
         transform: rotate(45deg);
+        animation: checkbox-off;
+
+        .is-focused & {
+          // Prevent checkbox animation and ripple effect on page load
           animation: checkbox-off $mdb-checkbox-animation-check forwards;
         }
       }
     }
+  }
 
   input[type=checkbox] {
 
@@ -92,8 +97,12 @@ label.checkbox-inline {
       }
 
       + .checkbox-decorator::before {
+        animation: rippleOn;
+        .is-focused & {
+          // Prevent checkbox animation and ripple effect on page load
           animation: rippleOn $mdb-checkbox-animation-ripple;
         }
+      }
 
       + .checkbox-decorator .check::after {
         //background-color: $brand-success; // FIXME: seems like tho wrong color, test and make sure it can be removed
@@ -103,12 +112,15 @@ label.checkbox-inline {
 
     &:not(:checked) {
       + .checkbox-decorator::before {
+        animation: rippleOff;
+        .is-focused & {
+          // Prevent checkbox animation and ripple effect on page load
           animation: rippleOff $mdb-checkbox-animation-ripple;
         }
+      }
 
       + .checkbox-decorator .check::after {
         animation: rippleOff $mdb-checkbox-animation-ripple forwards; // Ripple effect on uncheck
-
       }
     }
 
@@ -125,7 +137,6 @@ label.checkbox-inline {
       }
     }
   }
-
 }
 
 @keyframes checkbox-on {
@@ -165,7 +176,6 @@ label.checkbox-inline {
     20px -12px 0 11px,
     0 0 0 0 inset;
   }
-
   25% {
     box-shadow: 0 0 0 10px,
     10px -10px 0 10px,

scss/_radios.scss

@@ -56,10 +56,15 @@ label.radio-inline {
       ~ .mdb-radio-inner-circle {
         transform: scale3d(0.55, 0.55, 1);
         &::after {
+          animation: rippleOn;
+
+          .is-focused & {
+            // Prevent ripple effect on page load
             animation: rippleOn 500ms;
           }
         }
       }
+    }
 
     &:not(:checked) ~ .mdb-radio-inner-circle::after {
       animation: rippleOff 500ms;