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 {
-        opacity: 0;
-    }
-
-    to {
-        opacity: 1;
-    }
+    from { opacity: 0; }
+    to { opacity: 1; }
 }
 
 @keyframes fade_in {
-    from {
-        opacity: 0;
-    }
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
 
-    to {
-        opacity: 1;
-    }
+@-webkit-keyframes fade_out {
+    from { opacity: 1; }
+    to { opacity: 0.5; }
+}
+
+@keyframes fade_out {
+    from { opacity: 1; }
+    to { opacity: 0.5; }
 }
 
 @keyframes spin {

views/index.erb

@@ -1,24 +1,23 @@
-<div class="modal background">
-  <div class="modal box">
-    <h1>Notice:</h1>
-    <h2>This website uses cookies.</h2>
-    <p>We and selected partners use cookies as specified in
-      <a href="http://tools.ietf.org/html/rfc6265">RFC 6265</a>.
-      By proceeding you consent to the use of such
-      technologies; we may collect information from you
-      automatically through cookies or similar technology.</p>
-    <p>For further information please visit
-      <a href="http://allaboutcookies.org">allaboutcookies.org</a>.</p>
-    <div class="modal buttons">
-      <button class="modal button accept" onclick="acceptCookies();">
-        Accept
-      </button>
-      <button class="modal button decline" onclick="declineCookies();">
-        Decline
-      </button>
-    </div>
+<div class="modal box">
+  <h1>Notice:</h1>
+  <h2>This website uses cookies.</h2>
+  <p>We and selected partners use cookies as specified in
+    <a href="http://tools.ietf.org/html/rfc6265">RFC 6265</a>.
+    By proceeding you consent to the use of such
+    technologies; we may collect information from you
+    automatically through cookies or similar technology.</p>
+  <p>For further information please visit
+    <a href="http://allaboutcookies.org">allaboutcookies.org</a>.</p>
+  <div class="modal buttons">
+    <button class="modal button accept" onclick="acceptCookies();">
+      Accept
+    </button>
+    <button class="modal button decline" onclick="declineCookies();">
+      Decline
+    </button>
   </div>
 </div>
+<div class="modal background"></div>
 <div class="modal loader"></div>
 <div id="video"></div>
 <audio id="soundtrack" preload="auto" loop>