zoomIn/Out animation

1 files changed, 646 insertions, 0 deletions

diff --git a/src/css/style.css b/src/css/style.css
index feae1f7d..22482078 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -56,6 +56,644 @@ body {
     transform: translateY(-15px);
   }
 }
+
+@keyframes zoomIn {
+  10% {
+    transform: scale(0.1);
+  }
+  20% {
+    transform: scale(0.2);
+  }
+  30% {
+    transform: scale(0.3);
+  }
+  40% {
+    transform: scale(0.4);
+  }
+  50% {
+    transform: scale(0.5);
+  }
+  60% {
+    transform: scale(0.6);
+  }
+  70% {
+    transform: scale(0.7);
+  }
+  80% {
+    transform: scale(0.8);
+  }
+  90% {
+    transform: scale(0.9);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@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);
+  }
+  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);
+  }
+  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);
+  }
+  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);
+  }
+  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);
+  }
+  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);
+  }
+  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);
+  }
+  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);
+  }
+  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);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
 /* animation: name duration timing-function delay iteration-count direction fill-mode; */
 
 
@@ -97,6 +735,14 @@ body {
   animation-name: bounce;
 }
 
+.animate.zoomIn {
+  animation-name: zoomIn;
+}
+
+.animate.zoomOut {
+  animation-name: zoomOut;
+}
+
 /* transition */
 * {
   transition: all 0.3s;