diff --git a/less/_checkboxes.less b/less/_checkboxes.less
index 4d712a31..36b7888e 100644
--- a/less/_checkboxes.less
+++ b/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;
     }
   }
 
@@ -98,7 +98,7 @@
       }
 
       & + .checkbox-material:before {
-        animation: rippleOn @mdb-checkbox-animation-ripple;
+        animation: rippleOn;
       }
 
       & + .checkbox-material .check:after {
@@ -109,12 +109,11 @@
 
     &:not(:checked) {
       & + .checkbox-material:before {
-        animation: rippleOff @mdb-checkbox-animation-ripple;
+        animation: rippleOff;
       }
 
       & + .checkbox-material .check:after {
         animation: rippleOff @mdb-checkbox-animation-ripple forwards; // Ripple effect on uncheck
-
       }
     }
   }
@@ -133,6 +132,29 @@
   }
 }
 
+// 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 {
+          animation: rippleOn @mdb-checkbox-animation-ripple;
+        }
+      }
+      &:not(:checked) {
+        & + .checkbox-material:before {
+          animation: rippleOff @mdb-checkbox-animation-ripple;
+        }
+      }
+    }
+  }
+}
+
 @keyframes checkbox-on {
   0% {
     box-shadow:
@@ -162,6 +184,7 @@
       20px -12px 0 11px;
   }
 }
+
 @keyframes checkbox-off {
   0% {
     box-shadow:
@@ -173,7 +196,6 @@
       20px -12px 0 11px,
       0 0 0 0 inset;
   }
-
   25% {
     box-shadow:
       0 0 0 10px,
@@ -230,6 +252,7 @@
       0px 0 0 0 inset;
   }
 }
+
 @keyframes rippleOn {
   0% {
     opacity: 0;
@@ -241,6 +264,7 @@
     opacity: 0;
   }
 }
+
 @keyframes rippleOff {
   0% {
     opacity: 0;
diff --git a/less/_radios.less b/less/_radios.less
index 4a9d5d07..3ed73752 100644
--- a/less/_radios.less
+++ b/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;
diff --git a/sass/_checkboxes.scss b/sass/_checkboxes.scss
index c7f11bb2..6686a356 100644
--- a/sass/_checkboxes.scss
+++ b/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;
     }
   }
 
@@ -100,7 +100,7 @@
       }
 
       & + .checkbox-material:before {
-        animation: rippleOn $mdb-checkbox-animation-ripple;
+        animation: rippleOn;
       }
 
       & + .checkbox-material .check:after {
@@ -111,12 +111,11 @@
 
     &:not(:checked) {
       & + .checkbox-material:before {
-        animation: rippleOff $mdb-checkbox-animation-ripple;
+        animation: rippleOff;
       }
 
       & + .checkbox-material .check:after {
         animation: rippleOff $mdb-checkbox-animation-ripple forwards; // Ripple effect on uncheck
-
       }
     }
   }
@@ -135,6 +134,29 @@
   }
 }
 
+// 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 {
+          animation: rippleOn $mdb-checkbox-animation-ripple;
+        }
+      }
+      &:not(:checked) {
+        & + .checkbox-material:before {
+          animation: rippleOff $mdb-checkbox-animation-ripple;
+        }
+      }
+    }
+  }
+}
+
 @keyframes checkbox-on {
   0% {
     box-shadow:
@@ -164,6 +186,7 @@
       20px -12px 0 11px;
   }
 }
+
 @keyframes checkbox-off {
   0% {
     box-shadow:
@@ -175,7 +198,6 @@
       20px -12px 0 11px,
       0 0 0 0 inset;
   }
-
   25% {
     box-shadow:
       0 0 0 10px,
@@ -232,6 +254,7 @@
       0px 0 0 0 inset;
   }
 }
+
 @keyframes rippleOn {
   0% {
     opacity: 0;
@@ -243,6 +266,7 @@
     opacity: 0;
   }
 }
+
 @keyframes rippleOff {
   0% {
     opacity: 0;
diff --git a/sass/_radios.scss b/sass/_radios.scss
index ebc2111c..3a370aab 100644
--- a/sass/_radios.scss
+++ b/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;