Animation markup

isaacpitwa · isaacpitwa · commit 86a14df629df · 2020-06-30T23:32:03.000+03:00
diff --git a/applications/mix-blend-mode/index.html b/applications/mix-blend-mode/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Blend in Animation</title>
-    <link rel="style/css" href="./styles.css"/>
+    <link rel="stylesheet" href="./styles.css"/>
 </head>
 <body>
     <div class = 'container projects'>
diff --git a/applications/mix-blend-mode/styles.css b/applications/mix-blend-mode/styles.css
@@ -0,0 +1,77 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+  :root {
+    --primary-color: #6CD9CE;
+    --secondary-color: #D93BA1;
+    --complimentary-color: #2E2473;
+  }
+  .container {
+    min-height: 100vh;
+    position: relative;
+    width: 100vw;
+    display: flex;
+    background-color: var(--complimentary-color);
+    justify-content: center;
+    align-items: center;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+   position: relative;
+  }
+  
+  h1 {
+    font-size: 150px;
+    color: var(--primary-color);
+    transform: translateY(-600px);
+    animation: 1.2s slideIn ease-in-out forwards 1s;
+    z-index: 10;
+    opacity: 0;
+    position: relative;
+  }
+  
+  h1::before {
+      content: '';
+      width: 0%;
+      height: 76px;
+      background-color: var(--secondary-color);
+      position: absolute;
+      bottom: -10px;
+      animation: 1s underline ease-in-out forwards 2s;
+      mix-blend-mode: screen;
+  }
+  
+  .overlay {
+      position: absolute;
+      width: 100%;
+      top: 0;
+      bottom: 0;
+      opacity: 0;
+      left: 0;
+      right: 0;
+      background-color: var(--secondary-color);
+      transform: scale(.5);
+      animation: .5s slideIn ease-in-out forwards, 1s skewBg ease-in-out;
+  }
+  
+  @keyframes skewBg {
+    0% {
+      transform: scale(.5);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+  
+  @keyframes underline {
+    100% {
+      width: 100%;
+    }
+  }
+  
+  @keyframes slideIn {
+    100% {
+      transform: translateY(0px);
+      opacity: 1;
+    }
+  }
