Homepage load animations 2.

1 files changed, 42 insertions, 4 deletions

diff --git a/app/static/styles/default.css b/app/static/styles/default.css
index 654b42f..3812189 100644
--- a/app/static/styles/default.css
+++ b/app/static/styles/default.css
@@ -2,16 +2,14 @@
     --primary-color: #003B5C;
     --secondary-color: #C3D7EE;
     --home: rgba(200, 200, 200, 0.7);
-    --yes: rgba(0, 255, 0, 0.7);
-    --no: rgba(255, 0, 0, 0.7);
+    --yes: #5cff5c;
+    --no: #ff5c5c;
     font-size: 18;
     --fast-speed: 0.2s;
     --med-speed: 0.4s;
     --slow-speed: 1s;
 }
 
-* {}
-
 body {
     font-family: 'Liberation Sans', sans-serif;
     line-height: 1.2;
@@ -33,3 +31,43 @@ p {
     margin-left: 1rem;
     margin-right: 1rem;
 }
+
+/* Animation on page load. */
+@keyframes fade-refresh {
+    0% {
+        opacity: 0%;
+    }
+    100% {
+        opacity: 100%;
+    }
+}
+
+@keyframes squeeze-refresh {
+    0% {
+        width: 50%;
+    }
+    100% {
+        /* opacity: 100%; */
+        width: 10%;
+    }
+}
+
+@keyframes home-refresh {
+    0% {
+        transform: translateY(100%);
+        /* opacity: 0%; */
+    }
+    100% {
+        transform: translateY(0);
+        /* opacity: 100%; */
+    }
+}
+
+@keyframes yes-refresh {
+    0% {
+        transform: translateX(-100%);
+    }
+    100% {
+        transform: translateX(0);
+    }
+}