Animation fade sur le texte

CSS/etrange_decouverte.css

@@ -45,6 +45,7 @@ body {
         }
 
             #text {
+                margin-top:4vh;
                 font-family: 'Special Elite', cursive;
                 font-size: 1.8vw;
                 text-align: center;
@@ -55,17 +56,17 @@ body {
 
 
 
-                .phrase{
+                #phrase{
                     opacity:0;
                     margin:0.1vh 0vw 0.1vh 0vw;
                     
                 }
 
-                #p1{
+                .p1{
                     animation: fade 2s forwards;
                 }
 
-                #p{
+                .p{
                     animation: fade 2s forwards;
                 }
 
@@ -74,6 +75,11 @@ body {
                     100% {opacity:1}
                 }
 
+                @keyframes fade-reverse {
+                    0% {opacity :1}
+                    100% {opacity:0}
+                }
+
                     #p1{animation-delay:0.5s}
 
 
@@ -90,6 +96,10 @@ body {
                     font-family: 'Special Elite', cursive;
                     background:black;
                     border:none;
+                    cursor: pointer;
+                    text-align: right;
+                    -moz-appearance: none;
+                    content:'\f078';
                 }
 
                 #boisson:focus{
@@ -108,6 +118,14 @@ body {
                 
             }
 
+                #space{
+                    font-size: 1vw;
+                    font-family: 'Special Elite', cursive;
+                    position:relative;
+                    right:-20vw;
+                    top:2.5vh;
+                }
+
                 #arrow{
                     height:2vh;
                     width:auto;
@@ -125,7 +143,8 @@ body {
             #buttons {
                 display: flex;
                 justify-content: space-around;
-
+                margin-top:5vh;
+                opacity:0;
             }
 
             .button {
@@ -185,3 +204,7 @@ body {
                 #names{
                     margin : 0;
                 }
+
+                #rights{
+                    margin-bottom:0;
+                }

HTML/etrange_decouverte.html

@@ -18,22 +18,25 @@
     <main id="main">
         <section id="content">
             <article id="text">
-                <p class="phrase" id="p1">Il est 21h30, nous sommes en décembre,</p>
+                <p id="phrase" class="p1">Il est 21h30. Nous sommes en décembre.</p>
-                <p class="phrase" >la nuit est tombée depuis longtemps.</p>
+                <p id="phrase" >La nuit est tombée depuis bien longtemps.</p>
-                <p class="phrase" >La Lune éclaire la pelouse du R1 alors que vous sortez tout juste de votre réunion du Pôle Huma.</p>
+                <p id="phrase" >La Lune éclaire la pelouse du R1 alors que vous sortez tout juste de votre réunion du Pôle Huma.</p>
-                <p class="phrase" >Vous ressentez l'envie d'un petit 
+                <p id="phrase" >Vous ressentez l'envie d'un petit <br/>
-                <p class="phrase" >
                 <select id="boisson">
+                    <option selected>...</option>
                     <option>Café Vanille</option>
-                    <option>Café Noisette</option>
                     <option>Café Caramel</option>
+                    <option>Potage</option>
+                    <option>Thé vert</option>
+                    <option>Whisky</option>
                 </select> 
                 pour réviser la Thermo.</p>
-                <p class="phrase" >Votre écocup rempli de <span class="mot" id="selectedDrink"></span>,</p> 
+                <p id="phrase" >Votre écocup rempli de <span class="mot" id="selectedDrink"></span>,</p> 
-                <p class="phrase" >vous apercevez un étudiant qui se dirige tout droit 
+                <p id="phrase" >vous apercevez un étudiant qui se dirige tout droit 
-                <p class="phrase" >vers le sous sol !</p> 
+                <p id="phrase" >vers le sous sol !</p> 
-                <p class="phrase" >Bizarre à cette heure...</p>
+                <p id="phrase" >Bizarre à cette heure...</p>
                 <div id="arrowBlock">
+                    <p id="space">Press space</p>
                     <img id="arrow" src="../Images/Lecture.png" alt="Texte suivant"/>
                 </div>
             </article>

JAVASCRIPT/etrange_decouverte.js

@@ -1,4 +1,5 @@
 // select elements
+let buttons = document.getElementById("buttons")
 let safeButton = document.getElementById("safeButton");
 let boisson = document.getElementById("boisson");
 let selectedDrink = document.getElementById("selectedDrink");
@@ -10,24 +11,25 @@ let childs = []
 console.log(text.childNodes);
 
 selectedDrink.innerText = boisson.value;
-// for (let i=0;i<text.childNodes.length;i++){
-//     if (text.childNodes[i].className == "phrase"){
-//         childs += text.childNodes[i]
-//     }
-// };
-// console.log(childs);
 
 //functions
 function handleSelectChange(event){
     selectedDrink.innerText = event.target.value;
 }
 
-function handleDisplayText(){
+function handleDisplayText(event){
-    
+    if (event.keyCode == 32 || event.keyCode == 13){
-    text.childNodes[1].setAttribute("id","p");
+        if (counter_p < text.childElementCount-1){
-    console.log(text.childNodes[1]);
+            text.children[counter_p].style.cssText = "animation : fade 2s forwards"
+            counter_p += 1
+        } else {
+            text.children[counter_p].children[0].style.cssText = "animation : fade-reverse 2s forwards"
+            text.children[counter_p].children[1].style.cssText = "animation : none"
+            buttons.style.cssText = "animation : fade 2s forwards"
+        }
+    }
 }
 
 //listeners
 boisson.addEventListener("change",handleSelectChange)
-text.addEventListener("click",handleDisplayText)
+document.addEventListener("keypress",handleDisplayText)