IT WORKS

.gitignore

@@ -0,0 +1,5 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Sass template
+.sass-cache/
+*.css.map
+

invite/index.html

@@ -5,7 +5,7 @@
   <link rel="stylesheet" type="text/css" href="style.css">
 <div class="container">
   <div class="slide">
-    <h1>Loading</h1>
+    <h1>0</h1>
   </div>
 
   <div class="slide">

invite/style.scss

@@ -1,7 +1,9 @@
 $foreground: #FFFFFF;
 $background: #000000;
-$animation-delay: 2s;
-$animation-length: 10s;
+
+$animation-length: 3s;
+$animation-delay: $animation-length - 0.3;
+
 * {
   box-sizing: border-box;
 }
@@ -20,25 +22,14 @@ body {
 .container {
   height:100vh;
   width: 100vw;
-  :nth-child(1) {
-    animation-delay: 0s;
-    animation-duration: 1s;
-    animation-name: slide-in;
-    animation-fill-mode: both;
-  }
-  :nth-child(2) {
-    animation-delay: 1s;
-    animation-duration: 1s;
-    animation-name: slide-in;
-    animation-fill-mode: both;
-    display:none;
-  }
-  :nth-child(3) {
-    animation-delay: 2s;
-    animation-duration: 1s;
-    animation-name: slide-in;
-    animation-fill-mode: both;
-    display:none;
+
+  @for $child from 0 to 3 {
+    >:nth-child(#{$child+1}) {
+      animation-delay: $animation-delay*$child;
+      animation-duration: $animation-length;
+      animation-name: slide-in;
+      animation-fill-mode: both;
+    }
   }
 }
 
@@ -51,23 +42,18 @@ body {
   justify-content: center;
 }
 
-
-
-.scale-in-center {
-}
-
-@keyframes side-in {
+@keyframes slide-in {
   0% {
-    transform: translate(0, -50vh);
+    transform: translateY(-50px);
     opacity: 0;
   }
-
-  50% {
-    transform: translate(0, 0);
+  10%, 90% {
+    transform: translateY(0);
     opacity: 1;
   }
+
   100% {
-    transform: translate(0, 10vh);
+    transform: translateY(-50px);
     opacity: 0;
   }
 }