diff --git a/src/css/components/_ripple.scss b/src/css/components/_ripple.scss
index 5b017bf84..0fcfc8245 100644
--- a/src/css/components/_ripple.scss
+++ b/src/css/components/_ripple.scss
@@ -1,12 +1,12 @@
 @keyframes ripple-pop {
-  from {
+  0% {
     transform: scale(0);
     opacity: 1;
   }
   20% {
     opacity: 1;
   }
-  to {
+  100% {
     transform: scale(1);
     opacity: 0;
   }
diff --git a/src/css/components/_spinner.scss b/src/css/components/_spinner.scss
index a731a3917..ce555515a 100644
--- a/src/css/components/_spinner.scss
+++ b/src/css/components/_spinner.scss
@@ -10,19 +10,19 @@
   62.5% { transform: rotate(675deg); } // 2.5 * ARCSIZE
   75%   { transform: rotate(810deg); } // 3   * ARCSIZE
   87.5% { transform: rotate(945deg); } // 3.5 * ARCSIZE
-  to    { transform: rotate(1080deg); } // 4   * ARCSIZE
+  100%  { transform: rotate(1080deg); } // 4   * ARCSIZE
 }
 
 @keyframes left-spin {
-  from { transform: rotate(130deg); }
-  50% { transform: rotate(-5deg); }
-  to { transform: rotate(130deg); }
+  0%   { transform: rotate(130deg); }
+  50%  { transform: rotate(-5deg); }
+  100% { transform: rotate(130deg); }
 }
 
 @keyframes right-spin {
-  from { transform: rotate(-130deg); }
-  50% { transform: rotate(5deg); }
-  to { transform: rotate(-130deg); }
+  0%   { transform: rotate(-130deg); }
+  50%  { transform: rotate(5deg); }
+  100% { transform: rotate(-130deg); }
 }
 
 @keyframes fade-in {