Implement an appearance animation

Signed-off-by: mctaylors <cantsendmails@mctaylors.ru>

assets/css/keyframes.css

@@ -7,3 +7,51 @@
         outline-color: var(--dark-blue);
     }
 }
+
+@keyframes onload-background-blur {
+    from {
+        filter: blur(0) brightness(1);
+    }
+
+    99% {
+        filter: blur(0) brightness(1);
+    }
+
+    to {
+        filter: blur(16px) brightness(0.5);
+    }
+}
+
+@keyframes onload-dialog {
+    from {
+        opacity: 0;
+        width: var(--keyframe-dialog-width);
+        height: var(--keyframe-dialog-height);
+    }
+
+    80% {
+        opacity: 0;
+        width: var(--keyframe-dialog-width);
+        height: var(--keyframe-dialog-height);
+    }
+
+    to {
+        opacity: 1;
+        width: var(--dialog-width);
+        height: var(--dialog-height);
+    }
+}
+
+@keyframes onload-visibility {
+    from {
+        visibility: hidden;
+    }
+
+    99% {
+        visibility: hidden;
+    }
+
+    to {
+        visibility: visible;
+    }
+}

assets/css/style.css

@@ -7,6 +7,11 @@
     --border: #3f3f3f;
     --light-blue: #60f7df;
     --dark-blue: #10bfc7;
+    --dialog-width: 770px;
+    --dialog-height: 335px;
+    --keyframe-dialog-size-divider: 20;
+    --keyframe-dialog-width: calc(var(--dialog-width) - var(--dialog-width) / var(--keyframe-dialog-size-divider));
+    --keyframe-dialog-height: calc(var(--dialog-height) - var(--dialog-height) / var(--keyframe-dialog-size-divider));
 }
 
 .background-image {
@@ -17,7 +22,7 @@
     margin-left: -8px;
     background: url(/assets/jpg/Urchin_Underpass.jpg);
     background-size: cover;
-    filter: blur(16px) brightness(0.5);
+    animation: 750ms forwards ease-out onload-background-blur;
     transform: scale(1.1);
     z-index: -1;
 }
@@ -33,8 +38,7 @@ p, button {
 
 .dialog {
     position: absolute;
-    width: 770px;
+    animation: 1250ms forwards ease-out onload-dialog;
-    height: 355px;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
@@ -52,12 +56,11 @@ p, button {
 }
 
 .dialog > .description {
-    margin-left: 68px;
+    margin: 12px 32px 0 64px;
-    margin-right: 32px;
 }
 
-.dialog > p > br {
+.dialog > p, .dialog button > span {
-    margin-bottom: 0.75em;
+    animation: 1300ms forwards onload-visibility;
 }
 
 .dialog button {

assets/js/main.js

@@ -4,7 +4,10 @@ window.onload = function() {
 
 function play(audioId) {
     let audioElement = document.getElementById(audioId);
-    audioElement.play();
+    setTimeout(function() {
+            audioElement.play();
+        }, 1000
+    )
 }
 
 function close_button(href) {

index.html

@@ -16,14 +16,15 @@
         </p>
         <p class="description">
             Not Found.
-            <br/>
+        </p>
+        <p class="description">
             Server cannot find the requested resource. Make sure the link is spelled correctly.
         </p>
         <button class="left" onclick="close_button('https://github.com/mctaylors/NXInspired')">
-            Close
+            <span>Close</span>
         </button>
         <button class="right" onclick="details_button()">
-            Details
+            <span>Details</span>
         </button>
     </div>
 </body>