feat: add animations to pause menu

Rakesh9100 · Feb 15, 2023 · 252ea2b · 252ea2b
1 parent ef2425a
commit 252ea2b
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -99,7 +99,7 @@ <h1>Choose your favorite Vegetable to continue..</h1>
     <div class="options">
       <img src="images/play-button.svg" alt="Resume Playing" class="play-button" onclick="pauseGame()">
       <img src="images/restart-button.svg" alt="Restart Game" class="restart-button" onclick="restartGame()">    
-      <img src="images/home-button.svg" alt="Home" class="home" onclick="reset()">
+      <img src="images/home-button.svg" alt="Home" class="home-button" onclick="reset()">
     </div>
   </div>
 

diff --git a/script.js b/script.js
@@ -26,6 +26,7 @@ choose_btns.forEach(btn => {
 
 function startGame() {
     document.getElementById("pause-menu").style.display = "none";
+    document.getElementById("pause-button").style.display = "block";
     isRunning = 1;
     gameInterval = setInterval(increaseTime, 1000)
 }

diff --git a/style.css b/style.css
@@ -214,6 +214,7 @@ h1{
 }
 
 #pause-button{
+  display:none;
   width:40px;
   height: 40px;
   position: fixed;
@@ -252,11 +253,30 @@ h1{
   letter-spacing: 30px;
 }
 
-#pause-menu .home{
-  color: goldenrod;
-}
-
-.play-button, .restart-button, .home{
+.play-button, .restart-button, .home-button{
   width: 40px;
   height: 40px;
 }
+
+#pause-menu {
+  animation-name: scaleMenu;
+  animation-duration: 3s;
+  animation-iteration-count: infinite;
+  transform: scale(1);
+}
+
+@keyframes scaleMenu{
+  10% {
+      transform: scale(1.2);
+  }
+
+  20% {
+      transform: scale(1);
+  }
+}
+
+.play-button:hover, .play-button:focus, .restart-button:hover, .restart-button:focus, .home-button:focus, .home-button:hover{
+  background-color: #ffdf8f;
+  color: var(--primary);
+  transition: all 0.2s ease;
+}