Added animation to modal when rendering

src/components/Navigation.js

@@ -30,7 +30,7 @@ const Navigation = (props) => {
         Contact Me
         <Envelope />
       </button>
-      {props.modal ? <ContactModal /> : ''}
+      <ContactModal show={props.modal}/>
     </div>
   );
 }

src/components/css/Modal.css

@@ -1,15 +1,25 @@
 .modal {
-    width: 100vw;
+    display:flex;
+    width:0;
     height: 100vh;
     z-index: 100;
     position: fixed;
     top:0;
     left:0;
-    opacity: 1;
-    background-color: rgba(0,0,0,0.4);
-    display: flex;
+    opacity: 0;
+    background-color: rgba(0,0,0,0);
     justify-content: center;
     align-items: center;
+    transition-delay: 70ms, 70ms, 0ms;
+    transition: opacity 300ms ease-out, width 300ms ease-out, background-color 50ms ease-out;
+}
+
+.modal.show {
+    width: 100vw;
+    background-color: rgba(0,0,0,0.4);
+    opacity: 1;
+    transition-delay: 0ms, 0ms, 300ms;
+    transition: opacity 300ms ease-in, width 300ms ease-in, background-color 300ms ease-in;
 }
 
 .modal .box {

src/components/subcomponents/ContactModal.js

@@ -23,6 +23,7 @@ const ContactModal = props => {
         title="Contact Me"
         content = {renderContent()}
         onDismiss={props.toggleContactModal}
+        show={props.show}
       />
 };
 

src/components/subcomponents/Modal.js

@@ -4,7 +4,7 @@ import '../css/Modal.css';
 
 const Modal = props => {
   return ReactDOM.createPortal(
-    <div onClick={props.onDismiss} className="modal">
+    <div onClick={props.onDismiss} className={`modal ${props.show?'show':''}`}>
       <div onClick={(e) => e.stopPropagation()} className="box">
 
         <div className="title">{props.title}</div>