Pretty up animation

public/willpower.css

@@ -6,8 +6,11 @@ html, body {
     margin: 0px;
     height: 100%;
     font-family: sans-serif;
+    background-color: black;
 }
 
+.modal { opacity: 1; }
+
 .modal.background {
     background-image: url('/tip.jpg');
     background-position: center;
@@ -17,8 +20,12 @@ html, body {
     width: 100%;
     position: absolute;
     display: flex;
-    align-items: center;
     justify-content: center;
+    -webkit-animation-name: fade_out;
+    -webkit-animation-duration: 1.5s;
+    animation-name: fade_out;
+    animation-duration: 1.5s;
+    opacity: 0.5;
 }
 
 .modal.box {
@@ -35,6 +42,9 @@ html, body {
     animation-duration: 1.5s;
     position: absolute;
     z-index: 10;
+    top: 50%;
+    left: 50%;
+    margin: -10em auto auto -29em;
 }
 
 .modal.buttons {
@@ -96,23 +106,23 @@ html, body {
 }
 
 @-webkit-keyframes fade_in {
-    from {
+    from { opacity: 0; }
-        opacity: 0;
+    to { opacity: 1; }
-    }
-
-    to {
-        opacity: 1;
-    }
 }
 
 @keyframes fade_in {
-    from {
+    from { opacity: 0; }
-        opacity: 0;
+    to { opacity: 1; }
 }
 
-    to {
+@-webkit-keyframes fade_out {
-        opacity: 1;
+    from { opacity: 1; }
+    to { opacity: 0.5; }
 }
+
+@keyframes fade_out {
+    from { opacity: 1; }
+    to { opacity: 0.5; }
 }
 
 @keyframes spin {

views/index.erb

@@ -1,4 +1,3 @@
-<div class="modal background">
 <div class="modal box">
   <h1>Notice:</h1>
   <h2>This website uses cookies.</h2>
@@ -18,7 +17,7 @@
     </button>
   </div>
 </div>
-</div>
+<div class="modal background"></div>
 <div class="modal loader"></div>
 <div id="video"></div>
 <audio id="soundtrack" preload="auto" loop>