From a2853cad2b1d3db171436b4924c2178dba22ec8b Mon Sep 17 00:00:00 2001
From: Arti Zirk <arti.zirk@gmail.com>
Date: Thu, 20 Jul 2017 23:30:58 +0300
Subject: [PATCH] IT WORKS

---
 .gitignore        |  5 +++++
 invite/index.html |  2 +-
 invite/style.scss | 50 +++++++++++++++++------------------------------
 3 files changed, 24 insertions(+), 33 deletions(-)
 create mode 100644 .gitignore

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..0a39cda
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,5 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Sass template
+.sass-cache/
+*.css.map
+
diff --git a/invite/index.html b/invite/index.html
index 3fed870..8a37b47 100644
--- a/invite/index.html
+++ b/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">
diff --git a/invite/style.scss b/invite/style.scss
index 4453728..9646f61 100644
--- a/invite/style.scss
+++ b/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;
   }
 }