diff --git a/.stylelintrc.json b/.stylelintrc.json
index 1f451f64c..5920616c9 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -45,9 +45,9 @@
             }
         ],
         "keyframes-name-pattern": [
-            "^([_a-z][a-z0-9]*)([-_]{1,2}[a-z0-9]+)*$",
+            "^a-([-_]{0,2}[a-z0-9]+)*$",
             {
-                "message": "Expected keyframe name to be kebab-case"
+                "message": "Keyframe name must begin with `a-` and be kebab-case"
             }
         ],
         "selector-id-pattern": [
diff --git a/javascripts/core/app/options.js b/javascripts/core/app/options.js
index 8ceb639c8..c433d5d31 100644
--- a/javascripts/core/app/options.js
+++ b/javascripts/core/app/options.js
@@ -66,7 +66,7 @@ export function isSecretImport(data) {
 export function tryImportSecret(data) {
   const index = secretImportIndex(data);
   if (index === 0 && document.body.style.animation === "") {
-    document.body.style.animation = "barrelRoll 5s 1";
+    document.body.style.animation = "a-barrel-roll 5s 1";
     SecretAchievement(15).unlock();
     setTimeout(() => document.body.style.animation = "", 5000);
     return true;
diff --git a/javascripts/core/big_crunch.js b/javascripts/core/big_crunch.js
index 063572e1c..9a65e91e8 100644
--- a/javascripts/core/big_crunch.js
+++ b/javascripts/core/big_crunch.js
@@ -3,7 +3,7 @@ import { DC } from "./constants";
 import { SpeedrunMilestones } from "./speedrun";
 
 export function bigCrunchAnimation() {
-  document.body.style.animation = "implode 2s 1";
+  document.body.style.animation = "a-implode 2s 1";
   setTimeout(() => {
     document.body.style.animation = "";
   }, 2000);
diff --git a/javascripts/core/devtools.js b/javascripts/core/devtools.js
index 8ac429cbd..3d05cf553 100644
--- a/javascripts/core/devtools.js
+++ b/javascripts/core/devtools.js
@@ -93,17 +93,17 @@ dev.tripleEverything = function() {
 };
 
 dev.barrelRoll = function() {
-  document.body.style.animation = "barrelRoll 5s 1";
+  document.body.style.animation = "a-barrel-roll 5s 1";
   setTimeout(() => document.body.style.animation = "", 5000);
 };
 
 dev.spin3d = function() {
-  if (document.body.style.animation === "") document.body.style.animation = "spin3d 3s infinite";
+  if (document.body.style.animation === "") document.body.style.animation = "a-spin3d 3s infinite";
   else document.body.style.animation = "";
 };
 
 dev.spin4d = function() {
-  if (document.body.style.animation === "") document.body.style.animation = "spin4d 3s infinite";
+  if (document.body.style.animation === "") document.body.style.animation = "a-spin4d 3s infinite";
   else document.body.style.animation = "";
 };
 
diff --git a/javascripts/core/dilation.js b/javascripts/core/dilation.js
index 00e780749..640264410 100644
--- a/javascripts/core/dilation.js
+++ b/javascripts/core/dilation.js
@@ -3,7 +3,7 @@ import { DC } from "./constants";
 import { SpeedrunMilestones } from "./speedrun";
 
 export function animateAndDilate() {
-  document.body.style.animation = "dilate 2s 1 linear";
+  document.body.style.animation = "a-dilate 2s 1 linear";
   setTimeout(() => {
     document.body.style.animation = "";
   }, 2000);
@@ -11,7 +11,7 @@ export function animateAndDilate() {
 }
 
 export function animateAndUndilate() {
-  document.body.style.animation = "undilate 2s 1 linear";
+  document.body.style.animation = "a-undilate 2s 1 linear";
   setTimeout(() => {
     document.body.style.animation = "";
   }, 2000);
diff --git a/javascripts/core/eternity.js b/javascripts/core/eternity.js
index 07bf10b35..df2fa44de 100644
--- a/javascripts/core/eternity.js
+++ b/javascripts/core/eternity.js
@@ -57,7 +57,7 @@ function giveEternityRewards(auto) {
 }
 
 export function eternityAnimation() {
-  document.body.style.animation = "eternify 3s 1";
+  document.body.style.animation = "a-eternify 3s 1";
   setTimeout(() => {
     document.body.style.animation = "";
   }, 3000);
diff --git a/javascripts/core/reality.js b/javascripts/core/reality.js
index 1e8c8efce..aa7fa7c6f 100644
--- a/javascripts/core/reality.js
+++ b/javascripts/core/reality.js
@@ -180,8 +180,8 @@ function triggerManualReality(realityProps) {
 
 export function runRealityAnimation() {
   document.getElementById("ui").style.userSelect = "none";
-  document.getElementById("ui").style.animation = "realize 10s 1";
-  document.getElementById("realityanimbg").style.animation = "realizebg 10s 1";
+  document.getElementById("ui").style.animation = "a-realize 10s 1";
+  document.getElementById("realityanimbg").style.animation = "a-realizebg 10s 1";
   document.getElementById("realityanimbg").style.display = "block";
   setTimeout(() => {
     document.getElementById("realityanimbg").play();
diff --git a/javascripts/core/secret-formula/news.js b/javascripts/core/secret-formula/news.js
index e51d6bb06..f4b5311ba 100644
--- a/javascripts/core/secret-formula/news.js
+++ b/javascripts/core/secret-formula/news.js
@@ -915,7 +915,7 @@ GameDatabase.news = [
     id: "a174",
     text:
       `<span style='font-family: runescape; color: yellow; text-shadow: 0.1rem 0.1rem black; letter-spacing: 0.1rem;
-      font-size: 2rem; line-height: 0; animation: text-flash 1s steps(1, end) infinite;'
+      font-size: 2rem; line-height: 0; animation: a-text-flash 1s steps(1, end) infinite;'
       >FREE RUNE ARMOR TRIMMING</span>`,
   },
   {
@@ -992,12 +992,12 @@ GameDatabase.news = [
   {
     id: "a184",
     text:
-      `<span style='animation: text-grow 1s infinite'>R̵̬̙͋͂̀̋͑̈́̇͠Ê̵͇͎͂̂̍̓̌̐̋̋̀̀̔M̶̨̲̯̘͙̬̥̮̣͚̱̫͛̽̃͌̚͝
-      "Ą̴͍̝͐Į̷̛̲̯̫̘͌́̄̏͌̀̈́͝͝Ṅ̶̛̻̠̠̤̦̞̞͗̎̊̌̊͝͠</span><span style='animation: text-shrink 1s infinite'>
+      `<span style='animation: a-text-grow 1s infinite'>R̵̬̙͋͂̀̋͑̈́̇͠Ê̵͇͎͂̂̍̓̌̐̋̋̀̀̔M̶̨̲̯̘͙̬̥̮̣͚̱̫͛̽̃͌̚͝
+      "Ą̴͍̝͐Į̷̛̲̯̫̘͌́̄̏͌̀̈́͝͝Ṅ̶̛̻̠̠̤̦̞̞͗̎̊̌̊͝͠</span><span style='animation: a-text-shrink 1s infinite'>
       Ḁ̷̛͂̈́͗̎̃̓͛́͘ͅW̶̡̖͓̗̦̃̇̌̀͝A̵͇̭͉̓̎̈̿̊́̄̚͜R̶̝͚̲̭͎͇͎͓͖͚͇̀̈́͗̃̏̂̌͝͝Ę̴̡̤͙͈̝̬̰͒͘</span><span style
-      ='animation: text-grow 1s infinite'> ̶̺̈́́̆̓͘͘Ồ̸̢̢̮͓̯̗͙͚̬̉͊̿F̶̠̤̱̱̱͊̂̍̔̃͆̆̑̿͘</span><span style='animation:
-      text-shrink 1s infinite'> ̴̨̞̠̮͚̱͉͋̔͗̽̈́́́̅ͅỴ̶̣̙̹͚̲͔̲̼̬̥̀͌̒̾͘͘O̵̪̠̗̝̗̘̜͚̮̊͒͆̃̀̌̒͝ͅU̸͎͗̍̑̎̅̅͝R̵̗͑̽̏̓͆͒̈́͌͘̕
-      </span><span style='animation: text-grow 1s infinite'> ̸̑̽̇̆͊̔̍̊̈́̈́͘ͅS̸̘͐͝U̴̥̭̚͘R̸̖̜͍͒́̋͆̈́̓
+      ='animation: a-text-grow 1s infinite'> ̶̺̈́́̆̓͘͘Ồ̸̢̢̮͓̯̗͙͚̬̉͊̿F̶̠̤̱̱̱͊̂̍̔̃͆̆̑̿͘</span><span style='animation:
+      a-text-shrink 1s infinite'> ̴̨̞̠̮͚̱͉͋̔͗̽̈́́́̅ͅỴ̶̣̙̹͚̲͔̲̼̬̥̀͌̒̾͘͘O̵̪̠̗̝̗̘̜͚̮̊͒͆̃̀̌̒͝ͅU̸͎͗̍̑̎̅̅͝R̵̗͑̽̏̓͆͒̈́͌͘̕
+      </span><span style='animation: a-text-grow 1s infinite'> ̸̑̽̇̆͊̔̍̊̈́̈́͘ͅS̸̘͐͝U̴̥̭̚͘R̸̖̜͍͒́̋͆̈́̓
       R̸̡̛̛̪̝̟̱̣̹̭̟̣̀̈̀̏̉̌͝͠Õ̶͙͈͖̠͇̬͍̟̰U̵̩̫͉̝͔̼͎̦̔̓̽͌͊̏̇̓̀̓̀Ņ̸͍͇̘̙̥̰͉̲͕͈̥̍͛̃̑͝Ḑ̵̤̻̖̱̘̯̝̖̈̌̄̕͝
       Ī̶̜̱̈́̑̃̉̄̋̔͐͋͠Ṅ̴͎̞͍̽͊͛̈́̅͛̈̅̚͠Ģ̸̢̾͊S̷̫̼̜̼͇̋͛̎͑͆̅̓̇</span>`,
   },
@@ -1014,10 +1014,10 @@ GameDatabase.news = [
   {
     id: "a186",
     text:
-      `<span style='animation: text-shrink 1s infinite'>/(^_^)/</span> <span style='animation: text-grow 1s infinite
-      '>\\(^_^)\\</span> <span style='animation: text-shrink 1s infinite'>/(^_^)/</span> <span style='animation:
-      text-grow 1s infinite'>\\(^_^)\\</span> <span style='animation: text-shrink 1s infinite'>/(^_^)/</span> <span
-      style='animation: text-grow 1s infinite'>\\(^_^)\\</span>`,
+      `<span style='animation: a-text-shrink 1s infinite'>/(^_^)/</span> <span style='animation: a-text-grow 1s infinite
+      '>\\(^_^)\\</span> <span style='animation: a-text-shrink 1s infinite'>/(^_^)/</span> <span style='animation:
+      a-text-grow 1s infinite'>\\(^_^)\\</span> <span style='animation: a-text-shrink 1s infinite'>/(^_^)/</span> <span
+      style='animation: a-text-grow 1s infinite'>\\(^_^)\\</span>`,
   },
   {
     id: "a187",
@@ -1083,7 +1083,7 @@ GameDatabase.news = [
       random *= 255;
       const color = `hsl(${random}, 90%, 60%)`;
       return `<span style='color: ${color}; text-shadow: 0 0 0.5rem ${color};
-        animation: text-grow 0.4s infinite;'>Disco Time!</span>`;
+        animation: a-text-grow 0.4s infinite;'>Disco Time!</span>`;
     },
   },
   {
@@ -1352,8 +1352,8 @@ GameDatabase.news = [
     id: "a238",
     get text() {
       return `AD Player: "How many orders of magnitude are you on?" Normal person: "Like, maybe 5 or 6 right now, my
-      dude." AD Player: "You are like a little baby. Watch this: <span style='animation: text-crunch ${newsAnimSpd(22)}s
-      1; font-size: 0;'>C R O N C H</span>"`;
+      dude." AD Player: "You are like a little baby. Watch this: <span style='animation: a-text-crunch
+      ${newsAnimSpd(22)}s 1; font-size: 0;'>C R O N C H</span>"`;
     },
   },
   {
@@ -1441,7 +1441,7 @@ GameDatabase.news = [
   },
   {
     id: "a246",
-    text: "<span style='animation: fade-out 3s infinite'>OoooOOOOooOOO, it's me, the infamous news ghost!</span>",
+    text: "<span style='animation: a-fade-out 3s infinite'>OoooOOOOooOOO, it's me, the infamous news ghost!</span>",
   },
   (function() {
     let isFlipped = false;
@@ -1505,7 +1505,7 @@ GameDatabase.news = [
   {
     id: "a252",
     get text() {
-      return `<span style='animation: text-stretch ${newsAnimSpd(30)}s 1'>This message is dilated.</span>`;
+      return `<span style='animation: a-text-stretch ${newsAnimSpd(30)}s 1'>This message is dilated.</span>`;
     },
   },
   {
@@ -2256,7 +2256,7 @@ GameDatabase.news = [
   {
     id: "a352",
     get text() {
-      return `<span style='opacity: 0; animation: disappear ${newsAnimSpd(20)}s 1'>
+      return `<span style='opacity: 0; animation: a-disappear ${newsAnimSpd(20)}s 1'>
       This news message is antimemetic. You will forget that it exists shortly.</span>`;
     }
   },
diff --git a/public/stylesheets/styles.css b/public/stylesheets/styles.css
index a56ed48de..fb7c637c6 100644
--- a/public/stylesheets/styles.css
+++ b/public/stylesheets/styles.css
@@ -509,7 +509,6 @@ button:focus {
   position: absolute;
   right: 0.5rem;
   bottom: 0.5rem;
-  animation: weee 4s infinite;
 }
 
 .o-time-study-selection-btn {
@@ -1130,26 +1129,25 @@ br {
   }
 }
 
-/* stylelint-disable-next-line keyframes-name-pattern */
-@keyframes barrelRoll {
+@keyframes a-barrel-roll {
   0% { transform: rotateZ(0deg); }
 
   50%,
   100% { transform: rotateZ(360deg); }
 }
 
-@keyframes spin3d {
+@keyframes a-spin3d {
   0% { transform: rotate3d(5.2, -2.8, 1.4, 0deg); }
   100% { transform: rotate3d(5.2, -2.8, 1.4, 360deg); }
 }
 
-@keyframes spin4d {
+@keyframes a-spin4d {
   0%,
   100% { transform: scale(1) rotate3d(5.2, -2.8, 1.4, 0deg); }
   50% { transform: scale(0) rotate3d(5.2, -2.8, 1.4, 360deg); }
 }
 
-@keyframes float {
+@keyframes a-float {
   0% {
     bottom: 0;
     opacity: 0;
@@ -1165,7 +1163,7 @@ br {
   }
 }
 
-@keyframes implode {
+@keyframes a-implode {
   0%,
   100% {
     transform: scale(1);
@@ -1178,7 +1176,7 @@ br {
   }
 }
 
-@keyframes eternify {
+@keyframes a-eternify {
   0% {
     opacity: 1;
     filter: blur(0);
@@ -1220,7 +1218,7 @@ br {
   }
 }
 
-@keyframes dilate {
+@keyframes a-dilate {
   0% {
     opacity: 1;
     transform: scaleX(1);
@@ -1242,7 +1240,7 @@ br {
   }
 }
 
-@keyframes undilate {
+@keyframes a-undilate {
   0% {
     opacity: 1;
     transform: scaleX(1);
@@ -1264,14 +1262,14 @@ br {
   }
 }
 
-@keyframes realize {
+@keyframes a-realize {
   0% { opacity: 1; }
   20% { opacity: 0; }
   80% { opacity: 0; }
   100% { opacity: 1; }
 }
 
-@keyframes realizebg {
+@keyframes a-realizebg {
   0% { opacity: 0; }
   20% { opacity: 0; }
   30% { opacity: 1; }
@@ -1280,41 +1278,41 @@ br {
   100% { opacity: 0; }
 }
 
-@keyframes text-grow {
+@keyframes a-text-grow {
   0% { font-size: 1.3rem; }
   50% { font-size: 1.8rem; }
   100% { font-size: 1.3rem; }
 }
 
-@keyframes text-shrink {
+@keyframes a-text-shrink {
   0% { font-size: 1.8rem; }
   50% { font-size: 1.3rem; }
   100% { font-size: 1.8rem; }
 }
 
-@keyframes text-crunch {
+@keyframes a-text-crunch {
   0% { font-size: 1.5rem; }
   90% { font-size: 1.5rem; }
   100% { font-size: 0; }
 }
 
-@keyframes text-flash {
+@keyframes a-text-flash {
   0% { color: yellow; }
   50% { color: red; }
 }
 
-@keyframes fade-out {
+@keyframes a-fade-out {
   0% { opacity: 1; }
   50% { opacity: 0; }
   100% { opacity: 1; }
 }
 
-@keyframes disappear {
+@keyframes a-disappear {
   0% { opacity: 1; }
   100% { opacity: 0; }
 }
 
-@keyframes text-stretch {
+@keyframes a-text-stretch {
   0% { letter-spacing: 0; }
   100% { letter-spacing: 30rem; }
 }
@@ -9343,7 +9341,7 @@ input.o-automator-block-input {
   font-family: "Font Awesome 6 Free" !important;
 }
 
-@keyframes opacity {
+@keyframes a-opacity {
   0% { opacity: 0; }
   50% { opacity: 0.4; }
   100% { opacity: 0; }
@@ -9362,7 +9360,7 @@ input.o-automator-block-input {
   left: 0;
   background: gold;
   border-radius: var(--var-border-radius, inherit);
-  animation: opacity 3s infinite;
+  animation: a-opacity 3s infinite;
 }
 
 .o-celestial-nav__hoverable .tooltiptext {
diff --git a/public/stylesheets/theme-S1.css b/public/stylesheets/theme-S1.css
index 74b170e0a..bb429bf59 100644
--- a/public/stylesheets/theme-S1.css
+++ b/public/stylesheets/theme-S1.css
@@ -45,18 +45,17 @@ body.t-s1 {
   z-index: 0;
   opacity: 1;
   background-image: url("../images/snow1.png"), url("../images/snow2.png"), url("../images/snow3.png");
-  animation: snow 10s linear infinite, snowFade 10s cubic-bezier(0, 0.3, 1, 0.7) infinite;
+  animation: a-snow 10s linear infinite, a-snow-fade 10s cubic-bezier(0, 0.3, 1, 0.7) infinite;
   pointer-events: none;
 }
 
-@keyframes snow {
+@keyframes a-snow {
   0% { background-position: 0 0, 0 0, 0 0; }
   50% { background-position: 500px 500px, 100px 200px, -100px 150px; }
   100% { background-position: 1000px 1000px, 200px 400px, -200px 300px; }
 }
 
-/* stylelint-disable-next-line keyframes-name-pattern */
-@keyframes snowFade {
+@keyframes a-snow-fade {
   0% { opacity: 0; }
   50% { opacity: 1; }
   100% { opacity: 0; }
diff --git a/public/stylesheets/theme-S3.css b/public/stylesheets/theme-S3.css
index 7c3569d40..5e114bb11 100644
--- a/public/stylesheets/theme-S3.css
+++ b/public/stylesheets/theme-S3.css
@@ -9,10 +9,10 @@ body {
 .t-s3 .time-theorem-buttons,
 .t-s3 .sidebar,
 .t-s3 .c-glyph-tooltip {
-  animation: glasses 7s infinite;
+  animation: a-glasses 7s infinite;
 }
 
-@keyframes glasses {
+@keyframes a-glasses {
   0% { filter: blur(0); }
   10% { filter: blur(3px); }
   20% { filter: blur(0); }
diff --git a/src/components/SaveTimer.vue b/src/components/SaveTimer.vue
index 8285d9e02..45289297e 100644
--- a/src/components/SaveTimer.vue
+++ b/src/components/SaveTimer.vue
@@ -63,6 +63,6 @@ export default {
 }
 
 .t-s3 .o-save-timer {
-  animation: glasses 7s infinite;
+  animation: a-glasses 7s infinite;
 }
 </style>
diff --git a/src/components/tabs/celestial-pelle/PelleTab.vue b/src/components/tabs/celestial-pelle/PelleTab.vue
index cc1affb77..60582ee0b 100644
--- a/src/components/tabs/celestial-pelle/PelleTab.vue
+++ b/src/components/tabs/celestial-pelle/PelleTab.vue
@@ -186,12 +186,12 @@ export default {
   background: black;
 }
 
-@keyframes roll {
+@keyframes a-roll {
   100% { transform: rotateY(360deg); }
 }
 
 .pelle-icon {
-  animation: roll infinite 8s linear;
+  animation: a-roll infinite 8s linear;
 }
 
 .o-celestial-quote-history {