IT WORKS BETTER

invite/index.html

@@ -5,15 +5,26 @@
   <link rel="stylesheet" type="text/css" href="style.css">
 <div class="container">
   <div class="slide">
-    <h1>0</h1>
+    <h1>18. august</h1>
   </div>
 
   <div class="slide">
-    <h1>1</h1>
+    <h1>Oled oodatud</h1>
   </div>
 
   <div class="slide">
-    <h1>2</h1>
+    <h1>Minu</h1>
+    <img src="me.jpg">
+  </div>
+
+  <div class="slide">
+    <h1>Sünnipäevale</h1>
+  </div>
+
+  <div class="slide">
+    <h1>Näeme Lapikude kontoris</h1>
+    <h2>Akadeemia tee 5</h2>
+    <small>:wq!</small>
   </div>
 </div>
 </html>

invite/style.scss

@@ -1,8 +1,9 @@
 $foreground: #FFFFFF;
 $background: #000000;
 
-$animation-length: 3s;
-$animation-delay: $animation-length - 0.3;
+$animation-length: 4s;
+$animation-delay: $animation-length - 1.5;
+$slide-count: 5;
 
 * {
   box-sizing: border-box;
@@ -17,20 +18,28 @@ body {
   margin:0;
   padding:0;
   overflow:hidden;
+  animation: colorchange 10s alternate infinite;
 }
 
 .container {
   height:100vh;
   width: 100vw;
 
-  @for $child from 0 to 3 {
+  @for $child from 0 to $slide-count - 1 {
     >:nth-child(#{$child+1}) {
       animation-delay: $animation-delay*$child;
       animation-duration: $animation-length;
-      animation-name: slide-in;
+      animation-name: slide-in-out;
       animation-fill-mode: both;
     }
   }
+
+  >:nth-child(#{$slide-count}) {
+    animation-delay: $animation-delay* ($slide-count - 1);
+    animation-duration: $animation-length;
+    animation-name: slide-in;
+    animation-fill-mode: both;
+  }
 }
 
 .slide {
@@ -40,14 +49,15 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-direction: column;
 }
 
-@keyframes slide-in {
+@keyframes slide-in-out {
   0% {
-    transform: translateY(-50px);
+    transform: translateY(50px);
     opacity: 0;
   }
-  10%, 90% {
+  30%, 60% {
     transform: translateY(0);
     opacity: 1;
   }
@@ -57,3 +67,20 @@ body {
     opacity: 0;
   }
 }
+
+@keyframes slide-in {
+  0% {
+    transform: translateY(50px);
+    opacity: 0;
+  }
+  30%, 100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes colorchange {
+  0%   {background: #002b4a;}
+  50%  {background: #01004b;}
+  100% {background: #30004b;}
+}