diff --git a/src/sass/style.scss b/src/sass/style.scss
index 38af26295..9684709b6 100644
--- a/src/sass/style.scss
+++ b/src/sass/style.scss
@@ -347,10 +347,7 @@ a:hover {
   position: fixed;
   width: 100%;
   background: var(--main-color);
-  animation-name: loader;
-  animation-iteration-count: infinite;
-  animation-duration: 2s;
-  animation-timing-function: cubic-bezier(0.38, 0.16, 0.57, 0.82);
+  animation: loader 2s cubic-bezier(0.38, 0.16, 0.57, 0.82) infinite;
   z-index: 9999;
 }
 
@@ -1601,10 +1598,7 @@ label.checkbox {
 #caret {
   height: 1.5rem;
   background: var(--caret-color);
-  animation-name: caretFlashSmooth;
-  /* animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); */
-  animation-iteration-count: infinite;
-  animation-duration: 1s;
+  animation: caretFlashSmooth 1s infinite;
   position: absolute;
   border-radius: var(--roundness);
   // transition: 0.05s;
@@ -4017,10 +4011,7 @@ key {
   }
 
   &.flash {
-    animation-name: flashKey;
-    animation-duration: 1s;
-    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
-    animation-fill-mode: forwards;
+    animation: flashKey 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
   }
 }
 
@@ -4047,9 +4038,7 @@ key {
   width: 308px;
   height: 0;
   margin: 0 auto;
-  animation: shake;
-  animation-duration: 0s;
-  animation-iteration-count: infinite;
+  animation: shake 0s infinite;
   div {
     height: 200px;
     width: 308px;
diff --git a/static/themes/rgb.css b/static/themes/rgb.css
index a3ac49373..ad7ce1d45 100644
--- a/static/themes/rgb.css
+++ b/static/themes/rgb.css
@@ -51,10 +51,7 @@
 .pageSettings .section .buttons .button.active,
 .pageSettings .section.languages .buttons .language.active,
 .pageAccount .group.filterButtons .buttons .button.active {
-  animation-name: rgb-bg !important;
-  animation-duration: 5s;
-  animation-iteration-count: infinite;
-  animation-timing-function: linear;
+  animation: rgb-bg 5s linear infinite;
 }
 
 #top.focus .button.discord::after,
@@ -69,17 +66,12 @@
 #top .config .group .buttons .text-button:hover,
 a:hover,
 #words.flipped .word {
-  animation-name: rgb;
-  animation-duration: 5s;
-  animation-iteration-count: infinite;
-  animation-timing-function: linear;
+  animation: rgb 5s linear infinite;
 }
 
 /* .word letter.correct{
-    animation-name: rgb;
-    animation-duration: 5s;
-    animation-iteration-count: infinite;
-    animation-timing-function: linear;
+  animation: rgb 5s linear infinite;
+
 }  */
 
 #words.flipped .word letter.correct {
@@ -87,8 +79,5 @@ a:hover,
 }
 
 #words:not(.flipped) .word letter.correct {
-  animation-name: rgb;
-  animation-duration: 5s;
-  animation-iteration-count: infinite;
-  animation-timing-function: linear;
+  animation: rgb 5s linear infinite;
 }
diff --git a/static/themes/shadow.css b/static/themes/shadow.css
index 9fbb15169..a27242e79 100644
--- a/static/themes/shadow.css
+++ b/static/themes/shadow.css
@@ -35,18 +35,10 @@
 #menu .icon-button:hover,
 #top .config .group .buttons .text-button:hover,
 a:hover {
-  animation-name: shadow-repeat;
-  animation-duration: 3s;
-  animation-iteration-count: infinite;
-  animation-fill-mode: forwards;
-  animation-timing-function: linear;
+  animation: shadow-repeat 3s linear infinite forwards;
 }
 
 #logo,
 #typingTest .word letter.correct {
-  animation-name: shadow;
-  animation-duration: 5s;
-  animation-iteration-count: 1;
-  animation-fill-mode: forwards;
-  animation-timing-function: linear;
+  animation: shadow 5s linear 1 forwards;
 }