animation-proto

style.css

@@ -1,22 +1,62 @@
 body
 {
 	background-color: #FFE49F; 
-    color: #E07A31;
+  color: #E07A31;
+  font-family: "League Spartan";
+}
+
+.start {
+    display: flex;
+}
+
+#eins {
+    display: flex;
+    justify-content: right;
+}
+
+.text-rechts {
+    width: 46%;
+    margin-right: 100px;
+}
+
+#eins h2 {
+    font-weight: bold;
+    font-size: 150px;
+    position: relative;
+    text-align: justify;
+    text-align-last: justify;
+    display: flex;
+    line-height: 0.3;
+}
+
+p {
+    position: relative;
+    font-size: 20px;
+    text-align: right;
+    z-index: 60;
 }
 
 .main-title
 {
     font-family: "League Spartan Black";
-    font-size: 200px;
+    font-size: 170px;
     display: flex;
     text-align: center;
-    display: flex;
     justify-content: center;
     align-items: center;
     width: 60%;
-    height: 200%;
+    height: 100%;
     z-index: 100;
     position: relative;
+    flex-direction: column;
+    opacity: 90%;
+    animation: raise 0.5s ease-in;
+}
+
+@keyframes raise {
+    0% {z-index: 0; opacity: 0%;}
+    70% {opacity: 50%;}
+    100% {z-index: 100; opacity: 90%;}
 }
 
 body::before,
@@ -28,7 +68,7 @@ body::after {
     width: 2048px;
     height: 2048px;
     z-index: 50;
-    opacity:100%;
+    opacity: 80%;
 }
 
 body::before {
@@ -37,5 +77,58 @@ body::before {
 }
 
 
+#blobs {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    z-index: -2;
+    height: 100%;
+    width: 40%;
+    position: relative;
+  }
+  
+  
+  .blob {
+    border-radius: 200px;
+    filter: blur(60px);
+    width: 400px;
+    height: 350px;
+    top: 250px;
+  }
+  
+  .blue {
+    background-color: rgb(80, 80, 244);
+    position: relative;
+    right: 200px;
+    animation: appear 0.4s 0s ease-in;
+  }
+
+  .green {
+    background-color: rgb(48, 227, 48);
+    position: relative;
+    top: -200px;
+    right: 150px;
+    animation: appear 0.4s -0.075s ease-in; 
+  }
+  
+  .red {
+    background-color: rgb(255, 63, 63);
+    position: relative;
+    left: 60px;
+    top: -45px;
+    animation: appear 0.4s -0.15s ease-in; 
+  }
 
 
+  @keyframes appear {
+    0% {transform: scale(0); opacity: 0%;}
+    60% {transform: scale(0.8)}
+    80% {transform: scale(1.1); opacity: 100%;}
+    100% {transform: scale(1)}
+  }
+
+  @keyframes move-down-1 {
+    0% {top: 0px; right: 0px}
+    100% {top: 1000px; right: 1000px}
+  }