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 @@
-
Loading
+ 0
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;
}
}