Checkboxes and Radio buttons should not animate on page load

dist/css/bootstrap-material-design.css

@@ -898,9 +898,9 @@ fieldset[disabled] .form-group.is-focused .checkbox label {
         0 0 0 0,
         0 0 0 0,
         0 0 0 0 inset;
-  -webkit-animation: checkbox-off 0.3s forwards;
+  -webkit-animation: checkbox-off;
-       -o-animation: checkbox-off 0.3s forwards;
+       -o-animation: checkbox-off;
-          animation: checkbox-off 0.3s forwards;
+          animation: checkbox-off;
 }
 .checkbox input[type=checkbox]:focus + .checkbox-material .check:after {
   opacity: 0.2;
@@ -951,6 +951,11 @@ fieldset[disabled] .checkbox input[type=checkbox],
        -o-transform: rotate(-45deg);
           transform: rotate(-45deg);
 }
+.is-focused .checkbox .checkbox-material .check:before {
+  -webkit-animation: checkbox-off 0.3s forwards;
+       -o-animation: checkbox-off 0.3s forwards;
+          animation: checkbox-off 0.3s forwards;
+}
 .is-focused .checkbox input[type=checkbox]:checked + .checkbox-material:before {
   -webkit-animation: rippleOn 500ms;
        -o-animation: rippleOn 500ms;
@@ -1391,9 +1396,9 @@ fieldset[disabled] .form-group.is-focused .radio label {
           animation: rippleOff 500ms;
 }
 .radio label input[type=radio]:checked ~ .check:after {
-  -webkit-animation: rippleOn 500ms;
+  -webkit-animation: rippleOn;
-       -o-animation: rippleOn 500ms;
+       -o-animation: rippleOn;
-          animation: rippleOn 500ms;
+          animation: rippleOn;
 }
 .radio input[type=radio] {
   opacity: 0;
@@ -1435,6 +1440,11 @@ fieldset[disabled] .form-group.is-focused .radio label {
 .theme-dark .radio input[type=radio][disabled] ~ .circle {
   border-color: #ffffff;
 }
+.is-focused .radio input[type=radio]:checked ~ .check:after {
+  -webkit-animation: rippleOn 500ms;
+       -o-animation: rippleOn 500ms;
+          animation: rippleOn 500ms;
+}
 @keyframes rippleOn {
   0% {
     opacity: 0;

less/_checkboxes.less

@@ -68,7 +68,7 @@
         0 0 0 0,
         0 0 0 0,
         0 0 0 0 inset;
-      animation: checkbox-off @mdb-checkbox-animation-check forwards;
+      animation: checkbox-off;
     }
   }
 
@@ -132,9 +132,14 @@
   }
 }
 
-// Prevent ripple effect on page load
+// Prevent checkbox animation and ripple effect on page load
 .is-focused {
   .checkbox {
+    .checkbox-material {
+      .check:before {
+        animation: checkbox-off @mdb-checkbox-animation-check forwards;
+      }
+    }
     input[type=checkbox] {
       &:checked {
         & + .checkbox-material:before {

less/_radios.less

@@ -60,9 +60,8 @@
       animation: rippleOff 500ms;
     }
     input[type=radio]:checked ~ .check:after {
-      animation: rippleOn 500ms;
+      animation: rippleOn;
     }
-
   }
 
   input[type=radio] {
@@ -91,6 +90,15 @@
   }
 }
 
+// Prevent ripple effect on page load
+.is-focused {
+  .radio {
+    input[type=radio]:checked ~ .check:after {
+      animation: rippleOn 500ms;
+    }
+  }
+}
+
 @keyframes rippleOn {
   0% {
     opacity: 0;

sass/_checkboxes.scss

@@ -70,7 +70,7 @@
         0 0 0 0,
         0 0 0 0,
         0 0 0 0 inset;
-      animation: checkbox-off $mdb-checkbox-animation-check forwards;
+      animation: checkbox-off;
     }
   }
 
@@ -116,7 +116,6 @@
 
       & + .checkbox-material .check:after {
         animation: rippleOff $mdb-checkbox-animation-ripple forwards; // Ripple effect on uncheck
-
       }
     }
   }
@@ -135,9 +134,14 @@
   }
 }
 
-// Prevent ripple effect on page load
+// Prevent checkbox animation and ripple effect on page load
 .is-focused {
   .checkbox {
+    .checkbox-material {
+      .check:before {
+        animation: checkbox-off $mdb-checkbox-animation-check forwards;
+      }
+    }
     input[type=checkbox] {
       &:checked {
         & + .checkbox-material:before {
@@ -182,6 +186,7 @@
       20px -12px 0 11px;
   }
 }
+
 @keyframes checkbox-off {
   0% {
     box-shadow:
@@ -193,7 +198,6 @@
       20px -12px 0 11px,
       0 0 0 0 inset;
   }
-
   25% {
     box-shadow:
       0 0 0 10px,
@@ -250,6 +254,7 @@
       0px 0 0 0 inset;
   }
 }
+
 @keyframes rippleOn {
   0% {
     opacity: 0;
@@ -261,6 +266,7 @@
     opacity: 0;
   }
 }
+
 @keyframes rippleOff {
   0% {
     opacity: 0;

sass/_core.scss

@@ -57,7 +57,7 @@ legend {
   border: 0;
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
   .divider {
-    background-color: rgba(229, 229, 229, 0.12);
+    background-color: rgba(0, 0, 0, .12);
   }
   li {
     overflow: hidden;

sass/_radios.scss

@@ -62,9 +62,8 @@
       animation: rippleOff 500ms;
     }
     input[type=radio]:checked ~ .check:after {
-      animation: rippleOn 500ms;
+      animation: rippleOn;
     }
-
   }
 
   input[type=radio] {
@@ -93,6 +92,15 @@
   }
 }
 
+// Prevent ripple effect on page load
+.is-focused {
+  .radio {
+    input[type=radio]:checked ~ .check:after {
+      animation: rippleOn 500ms;
+    }
+  }
+}
+
 @keyframes rippleOn {
   0% {
     opacity: 0;