From 17c7d053b1d8b2b239e4877e2966a137fc787e70 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Tue, 8 Dec 2020 13:51:17 -0700
Subject: [PATCH] Add transition animation for the modals

---
 web/src/css/transitions.css | 62 +++++++++++++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 web/src/css/transitions.css

diff --git a/web/src/css/transitions.css b/web/src/css/transitions.css
new file mode 100644
index 0000000..0b543dd
--- /dev/null
+++ b/web/src/css/transitions.css
@@ -0,0 +1,62 @@
+/* Transition for modal background appearing/disappearing */
+.fade-enter-active, .fade-leave-active {
+	transition: opacity .5s;
+}
+
+.fade-enter, .fade-leave-to {
+	opacity: 0;
+}
+
+
+
+/* Transition for modal card appearing disappearing */
+.burst-enter-active {
+	animation: burst-in .5s;
+}
+.burst-leave-active { animation: burst-out .5s; }
+
+@keyframes burst-in {
+	0% {
+		transform: scale(0);
+	}
+	100% {
+		transform: scale(1);
+	}
+}
+
+@keyframes burst-out {
+	0% {
+		transform: scale(1);
+	}
+	100% {
+		transform: scale(0);
+	}
+}
+
+
+
+@media only screen and (min-width: 768px) {
+	@keyframes burst-in {
+		0% {
+			transform: scale(0);
+		}
+		50% {
+			transform: scale(1.25);
+		}
+		100% {
+			transform: scale(1);
+		}
+	}
+
+	@keyframes burst-out {
+		0% {
+			transform: scale(1);
+		}
+		50% {
+			transform: scale(1.25);
+		}
+		100% {
+			transform: scale(0);
+		}
+	}
+}
\ No newline at end of file