From fd16462c4b65dd7855da3f9f81eb17df02dea21d Mon Sep 17 00:00:00 2001
From: Nicolas Humblot <contact@nicolashumblot.fr>
Date: Thu, 29 Apr 2021 22:26:25 +0200
Subject: [PATCH] #99 Fade in then fade out with css

---
 src/views/vmd-rdv.view.scss | 11 +++++++++++
 src/views/vmd-rdv.view.ts   |  2 +-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/views/vmd-rdv.view.scss b/src/views/vmd-rdv.view.scss
index eafef0183..e6f85ba73 100644
--- a/src/views/vmd-rdv.view.scss
+++ b/src/views/vmd-rdv.view.scss
@@ -91,6 +91,17 @@
     }
 }
 
+.fade-in-then-fade-out {
+    animation-name: fade-in-then-fade-out;
+    animation-duration: 10s;
+    animation-fill-mode: forwards;
+}
+
+@keyframes fade-in-then-fade-out {
+    0%, 100% {opacity: 0}
+    10%, 90% {opacity: 1}
+}
+
 vmd-appointment-card {
     display: block;
     opacity: 1;
diff --git a/src/views/vmd-rdv.view.ts b/src/views/vmd-rdv.view.ts
index a35d65ea9..579284ae1 100644
--- a/src/views/vmd-rdv.view.ts
+++ b/src/views/vmd-rdv.view.ts
@@ -244,7 +244,7 @@ export abstract class AbstractVmdRdvView extends LitElement {
                         />`;
                     })}
                 </div>
-                <div class="eligibility-criteria">
+                <div class="eligibility-criteria fade-in-then-fade-out">
                     <p>Les critères d'éligibilité sont vérifiés lors de la prise de rendez-vous</p>
                 </div>
             `}