fixed animation code too long by divided 10

1 files changed, 11 insertions, 582 deletions

diff --git a/src/css/style.css b/src/css/style.css
index 22482078..b258501c 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -91,609 +91,38 @@ body {
 }
 
 @keyframes zoomOut {
-  1% {
-    transform: scale(1);
-  }
-  2% {
-    transform: scale(0.99);
-  }
-  3% {
-    transform: scale(0.98);
-  }
-  4% {
-    transform: scale(0.97);
-  }
-  5% {
-    transform: scale(0.96);
-  }
-  6% {
-    transform: scale(0.95);
-  }
-  7% {
-    transform: scale(0.94);
-  }
-  8% {
-    transform: scale(0.93);
-  }
-  9% {
-    transform: scale(0.92);
-  }
   10% {
-    transform: scale(0.91);
-  }
-  11% {
-    transform: scale(0.90);
-  }
-  12% {
-    transform: scale(0.89);
-  }
-  13% {
-    transform: scale(0.88);
-  }
-  14% {
-    transform: scale(0.87);
-  }
-  15% {
-    transform: scale(0.86);
-  }
-  16% {
-    transform: scale(0.85);
-  }
-  17% {
-    transform: scale(0.84);
-  }
-  18% {
-    transform: scale(0.83);
-  }
-  19% {
-    transform: scale(0.82);
-  }
-  20% {
-    transform: scale(0.81);
-  }
-  21% {
-    transform: scale(0.80);
-  }
-  22% {
-    transform: scale(0.79);
-  }
-  23% {
-    transform: scale(0.78);
-  }
-  24% {
-    transform: scale(0.77);
-  }
-  25% {
-    transform: scale(0.76);
-  }
-  26% {
-    transform: scale(0.75);
-  }
-  27% {
-    transform: scale(0.74);
-  }
-  28% {
-    transform: scale(0.73);
-  }
-  29% {
-    transform: scale(0.72);
-  }
-  30% {
-    transform: scale(0.71);
-  }
-  31% {
-    transform: scale(0.70);
-  }
-  32% {
-    transform: scale(0.69);
-  }
-  33% {
-    transform: scale(0.68);
-  }
-  34% {
-    transform: scale(0.67);
-  }
-  35% {
-    transform: scale(0.66);
-  }
-  36% {
-    transform: scale(0.65);
-  }
-  37% {
-    transform: scale(0.64);
-  }
-  38% {
-    transform: scale(0.63);
-  }
-  39% {
-    transform: scale(0.62);
-  }
-  40% {
-    transform: scale(0.61);
-  }
-  41% {
-    transform: scale(0.60);
-  }
-  42% {
-    transform: scale(0.59);
-  }
-  43% {
-    transform: scale(0.58);
-  }
-  44% {
-    transform: scale(0.57);
-  }
-  45% {
-    transform: scale(0.56);
-  }
-  46% {
-    transform: scale(0.55);
-  }
-  47% {
-    transform: scale(0.54);
-  }
-  48% {
-    transform: scale(0.53);
-  }
-  49% {
-    transform: scale(0.52);
-  }
-  50% {
-    transform: scale(0.51);
-  }
-  51% {
-    transform: scale(0.50);
-  }
-  52% {
-    transform: scale(0.49);
-  }
-  53% {
-    transform: scale(0.48);
-  }
-  54% {
-    transform: scale(0.47);
-  }
-  55% {
-    transform: scale(0.46);
-  }
-  56% {
-    transform: scale(0.45);
-  }
-  57% {
-    transform: scale(0.44);
-  }
-  58% {
-    transform: scale(0.43);
-  }
-  59% {
-    transform: scale(0.42);
-  }
-  60% {
-    transform: scale(0.41);
-  }
-  61% {
-    transform: scale(0.40);
-  }
-  62% {
-    transform: scale(0.39);
-  }
-  63% {
-    transform: scale(0.38);
-  }
-  64% {
-    transform: scale(0.37);
-  }
-  65% {
-    transform: scale(0.36);
-  }
-  66% {
-    transform: scale(0.35);
-  }
-  67% {
-    transform: scale(0.34);
-  }
-  68% {
-    transform: scale(0.33);
-  }
-  69% {
-    transform: scale(0.32);
-  }
-  70% {
-    transform: scale(0.31);
-  }
-  71% {
-    transform: scale(0.30);
-  }
-  72% {
-    transform: scale(0.29);
-  }
-  73% {
-    transform: scale(0.28);
-  }
-  74% {
-    transform: scale(0.27);
-  }
-  75% {
-    transform: scale(0.26);
-  }
-  76% {
-    transform: scale(0.25);
-  }
-  77% {
-    transform: scale(0.24);
-  }
-  78% {
-    transform: scale(0.23);
-  }
-  79% {
-    transform: scale(0.22);
-  }
-  80% {
-    transform: scale(0.21);
-  }
-  81% {
-    transform: scale(0.20);
-  }
-  82% {
-    transform: scale(0.19);
-  }
-  83% {
-    transform: scale(0.18);
-  }
-  84% {
-    transform: scale(0.17);
-  }
-  85% {
-    transform: scale(0.16);
-  }
-  86% {
-    transform: scale(0.15);
-  }
-  87% {
-    transform: scale(0.14);
-  }
-  88% {
-    transform: scale(0.13);
-  }
-  89% {
-    transform: scale(0.12);
-  }
-  90% {
-    transform: scale(0.11);
-  }
-  91% {
-    transform: scale(0.10);
-  }
-  92% {
-    transform: scale(0.09);
-  }
-  93% {
-    transform: scale(0.08);
-  }
-  94% {
-    transform: scale(0.07);
-  }
-  95% {
-    transform: scale(0.06);
-  }
-  96% {
-    transform: scale(0.05);
-  }
-  97% {
-    transform: scale(0.04);
-  }
-  98% {
-    transform: scale(0.03);
-  }
-  99% {
-    transform: scale(0.02);
-  }
-  100% {
-    transform: scale(0.01);
-  }
-}
-@keyframes zoomIn {
-  1% {
-    transform: scale(0.01);
-  }
-  2% {
-    transform: scale(0.02);
-  }
-  3% {
-    transform: scale(0.03);
-  }
-  4% {
-    transform: scale(0.04);
-  }
-  5% {
-    transform: scale(0.05);
-  }
-  6% {
-    transform: scale(0.06);
-  }
-  7% {
-    transform: scale(0.07);
-  }
-  8% {
-    transform: scale(0.08);
-  }
-  9% {
-    transform: scale(0.09);
-  }
-  10% {
-    transform: scale(0.10);
-  }
-  11% {
-    transform: scale(0.11);
-  }
-  12% {
-    transform: scale(0.12);
-  }
-  13% {
-    transform: scale(0.13);
-  }
-  14% {
-    transform: scale(0.14);
-  }
-  15% {
-    transform: scale(0.15);
-  }
-  16% {
-    transform: scale(0.16);
-  }
-  17% {
-    transform: scale(0.17);
-  }
-  18% {
-    transform: scale(0.18);
-  }
-  19% {
-    transform: scale(0.19);
+    transform: scale(1);
   }
   20% {
-    transform: scale(0.20);
-  }
-  21% {
-    transform: scale(0.21);
-  }
-  22% {
-    transform: scale(0.22);
-  }
-  23% {
-    transform: scale(0.23);
-  }
-  24% {
-    transform: scale(0.24);
-  }
-  25% {
-    transform: scale(0.25);
-  }
-  26% {
-    transform: scale(0.26);
-  }
-  27% {
-    transform: scale(0.27);
-  }
-  28% {
-    transform: scale(0.28);
-  }
-  29% {
-    transform: scale(0.29);
+    transform: scale(0.9);
   }
   30% {
-    transform: scale(0.30);
-  }
-  31% {
-    transform: scale(0.31);
-  }
-  32% {
-    transform: scale(0.32);
-  }
-  33% {
-    transform: scale(0.33);
-  }
-  34% {
-    transform: scale(0.34);
-  }
-  35% {
-    transform: scale(0.35);
-  }
-  36% {
-    transform: scale(0.36);
-  }
-  37% {
-    transform: scale(0.37);
-  }
-  38% {
-    transform: scale(0.38);
-  }
-  39% {
-    transform: scale(0.39);
+    transform: scale(0.8);
   }
   40% {
-    transform: scale(0.40);
-  }
-  41% {
-    transform: scale(0.41);
-  }
-  42% {
-    transform: scale(0.42);
-  }
-  43% {
-    transform: scale(0.43);
-  }
-  44% {
-    transform: scale(0.44);
-  }
-  45% {
-    transform: scale(0.45);
-  }
-  46% {
-    transform: scale(0.46);
-  }
-  47% {
-    transform: scale(0.47);
-  }
-  48% {
-    transform: scale(0.48);
-  }
-  49% {
-    transform: scale(0.49);
+    transform: scale(0.7);
   }
   50% {
-    transform: scale(0.50);
-  }
-  51% {
-    transform: scale(0.51);
-  }
-  52% {
-    transform: scale(0.52);
-  }
-  53% {
-    transform: scale(0.53);
-  }
-  54% {
-    transform: scale(0.54);
-  }
-  55% {
-    transform: scale(0.55);
-  }
-  56% {
-    transform: scale(0.56);
-  }
-  57% {
-    transform: scale(0.57);
-  }
-  58% {
-    transform: scale(0.58);
-  }
-  59% {
-    transform: scale(0.59);
+    transform: scale(0.6);
   }
   60% {
-    transform: scale(0.60);
-  }
-  61% {
-    transform: scale(0.61);
-  }
-  62% {
-    transform: scale(0.62);
-  }
-  63% {
-    transform: scale(0.63);
-  }
-  64% {
-    transform: scale(0.64);
-  }
-  65% {
-    transform: scale(0.65);
-  }
-  66% {
-    transform: scale(0.66);
-  }
-  67% {
-    transform: scale(0.67);
-  }
-  68% {
-    transform: scale(0.68);
-  }
-  69% {
-    transform: scale(0.69);
+    transform: scale(0.5);
   }
   70% {
-    transform: scale(0.70);
-  }
-  71% {
-    transform: scale(0.71);
-  }
-  72% {
-    transform: scale(0.72);
-  }
-  73% {
-    transform: scale(0.73);
-  }
-  74% {
-    transform: scale(0.74);
-  }
-  75% {
-    transform: scale(0.75);
-  }
-  76% {
-    transform: scale(0.76);
-  }
-  77% {
-    transform: scale(0.77);
-  }
-  78% {
-    transform: scale(0.78);
-  }
-  79% {
-    transform: scale(0.79);
+    transform: scale(0.4);
   }
   80% {
-    transform: scale(0.80);
-  }
-  81% {
-    transform: scale(0.81);
-  }
-  82% {
-    transform: scale(0.82);
-  }
-  83% {
-    transform: scale(0.83);
-  }
-  84% {
-    transform: scale(0.84);
-  }
-  85% {
-    transform: scale(0.85);
-  }
-  86% {
-    transform: scale(0.86);
-  }
-  87% {
-    transform: scale(0.87);
-  }
-  88% {
-    transform: scale(0.88);
-  }
-  89% {
-    transform: scale(0.89);
+    transform: scale(0.3);
   }
   90% {
-    transform: scale(0.90);
-  }
-  91% {
-    transform: scale(0.91);
-  }
-  92% {
-    transform: scale(0.92);
-  }
-  93% {
-    transform: scale(0.93);
-  }
-  94% {
-    transform: scale(0.94);
-  }
-  95% {
-    transform: scale(0.95);
-  }
-  96% {
-    transform: scale(0.96);
-  }
-  97% {
-    transform: scale(0.97);
-  }
-  98% {
-    transform: scale(0.98);
-  }
-  99% {
-    transform: scale(0.99);
+    transform: scale(0.2);
   }
   100% {
-    transform: scale(1);
+    transform: scale(0.1);
   }
 }
+
 /* animation: name duration timing-function delay iteration-count direction fill-mode; */