FUNCT Add custom icons with animation

1 files changed, 19 insertions, 3 deletions

diff --git a/src/styles/main.scss b/src/styles/main.scss
index a72b94b..2fcff94 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -8,6 +8,20 @@ html {
     -webkit-overflow-scrolling: touch;
 }
 
+@-webkit-keyframes animation {
+    from {
+        opacity: 0;
+        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
+        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    }
+
+    60% {
+        opacity: 1;
+        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    }
+}
+
 body {
     font-size: 1.2rem;
     font-family: Arial;
@@ -26,16 +40,18 @@ body {
             color: map-get($colors, font);
             text-decoration: none;
 
+            -webkit-animation-name: animation;
+            -webkit-animation-duration: 2s;
+
             .icon {
-                width: 100%;
-                height: 100%;
+                width: 70%;
+                margin: 5% 15%;
             }
 
             .name {
                 width: 100%;
                 text-align: center;
                 text-transform: uppercase;
-                margin-top: -20%;
             }
         }
     }