diff --git a/bundle.css b/bundle.css
index 1e1f2f0..765f280 100644
--- a/bundle.css
+++ b/bundle.css
@@ -130,7 +130,7 @@ header {
 
 @keyframes spinin { 
   0% {
-    transform: translateX(-100%);
+    transform: translateX(-100%) translateY(-100%);
   }
   100% {
     transform: translateX(0px);
@@ -238,6 +238,60 @@ footer p,hr,div {
   font-size: 3rem;
 }
 
+/*
+ * animations
+ */
+.spin {
+  animation: spin 2s infinite linear;
+  display: inline-block;
+  color: orange;
+}
+
+.hue-change {
+  animation: hue-change 2s infinite linear;
+  display: inline-block;
+  color: orange;
+}
+
+.size-big-small {
+  animation: size-big-small 2s infinite linear;
+  display: inline-block;
+  color: orange;
+}
+
+@keyframes hue-change {
+  from {
+    filter: hue-rotate(0deg);
+  }
+  to {
+    filter: hue-rotate(360deg);
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes size-big-small {
+  from {
+    transform: scale(1);
+  }
+  40% {
+    transform: scale(2);
+  }
+  80% {
+    transform: scale(0.75);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+
 /*
  * responsive webpage
  */