base animation

static/styles.css

@@ -220,6 +220,55 @@ html, body {
     }
 }
 
+@keyframes slide-fade-top {
+    0% {
+        opacity: 0;
+        transform: translateY(-150px)
+
+    }
+    50% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    100% {
+        opacity: 0;
+        transform: translateY(-150px)
+
+    }
+}
+
+@keyframes slide-fade-bottom {
+    0% {
+        opacity: 0;
+        transform: translateY(150px)
+
+    }
+    50% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    100% {
+        opacity: 0;
+        transform: translateY(150px)
+
+    }
+}
+
+@keyframes fade-overlay {
+    0% {
+        background-color: rgba(0,0,0,0.0);
+    }
+    50% {
+        background-color: rgba(0,0,0,0.9);
+    }
+
+    100% {
+        background-color: rgba(0,0,0,0.0);
+    }
+}
+
 #app-content {
     text-align: center;
     margin: 0 auto;
@@ -699,6 +748,17 @@ label {
     }
 }
 
+@keyframes flip-slide {
+    0% {
+        transform: rotateY(0deg);
+        transform: translateX(-100px);
+    }
+    100% {
+        transform: rotateY(-90deg);
+        transform: translateX(0px);
+    }
+}
+
 @keyframes flip-down {
     0% {
         transform: rotateY(0deg);
@@ -756,6 +816,12 @@ label {
     animation-fill-mode: forwards;
 }
 
+.flip-slide{
+    animation: flip-slide 1s;
+    animation-fill-mode: forwards;
+}
+
+
 #game-card h2 {
     font-size: 1.7em;
     font-family: 'diavlo', sans-serif;
@@ -1015,6 +1081,54 @@ label {
     color: #7d0b0b;
 }
 
+.overlay {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0,0,0,0.9);
+    z-index: 3;
+    animation: fade-overlay 5s;
+    animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
+}
+
+#killed-name {
+    color: white;
+    padding-top: 2em;
+    font-size: 2.5em;
+    margin: 0;
+    animation: slide-fade-top 5s;
+    animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
+}
+
+#killed-role {
+    animation: slide-fade-bottom 5s;
+    animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
+}
+
+
+.killed-card {
+    width: 50px;
+    height: 200px;
+    background-color: white;
+    position: absolute;
+    top: 19%;
+    left: 14%;
+    background-color: transparent;
+    cursor: pointer;
+    justify-content: space-between;
+    max-width: 17em;
+    border-radius: 3px;
+    height: 23em;
+    width: 72%;
+    box-shadow: 0 13px 17px rgba(0,0,0,0.6);
+    perspective: 1000px;
+    transform-style: preserve-3d;
+}
+
 @keyframes animatetop {
     from {top: -300px; opacity: 0}
     to {top: 0; opacity: 1}