Reimpliment listening amination

client/src/components/Listen.js

@@ -44,7 +44,30 @@ const Listen = ({ disable, startListening, stopListening, isListening }) => {
 
   return (
     <>
-      <div
+      <section className={styles.RippleContainer}>
+        <div
+          className={
+            isListening
+              ? `${styles.RippleBox} ${styles.RippleBoxPlay}`
+              : `${styles.RippleBox} ${styles.RippleBoxStop}`
+          }
+        >
+          <div
+            className={
+              isListening
+                ? `${styles.RippleButton} ${styles.RippleButtonPlay}`
+                : `${styles.RippleButton} ${styles.RippleButtonStop}`
+            }
+          >
+            <ListenButton
+              isListening={isListening}
+              onClick={toggleListen}
+              disable={disable}
+            />
+          </div>
+        </div>
+      </section>
+      {/* <div
         className={
           isListening
             ? `${styles.CirlceItems} ${styles.Play}`
@@ -59,7 +82,7 @@ const Listen = ({ disable, startListening, stopListening, isListening }) => {
           onClick={toggleListen}
           disable={disable}
         />
-      </div>
+      </div> */}
     </>
   );
 };

client/src/components/styles/Listen.module.css

@@ -1,59 +1,14 @@
-.CirlceItems {
-    width: 35vmin;
-    height: 35vmin;
-    position: relative;
-    margin: auto;
-}
-
-.CircleItem {
-    background-color: dodgerblue;
-    height: 100%;
-    width: 100%;
-    border-radius: 50%;
-    position: absolute;
-    
-    opacity: 0;
-}
-
-.Play > .CircleItem {
-    animation: expandFadeOut 3s infinite ease-out;
-}
-
-.Pause > .CircleItem  {
-    animation-play-state: paused;
-    /* transition: opacity 3s ease-out;
-    opacity: 0;
-    animation: expandFadeOut 3s ease-in-out;
-    animation-iteration-count: 1;
-    animation-fill-mode: forwards; */
-}
-    
-
-.CircleItem:nth-child(1) { animation-delay: 1s; }
-.CircleItem:nth-child(2) { animation-delay: 2s; }
-.CircleItem:nth-child(3) { animation-delay: 3s; }
-
-.ListenButton,
-.PauseButton {
-    position: absolute;
-    left: 36%;
-    transform: translateX(-50%);
-    top: 50%;
-    transform: translateY(-50%);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
 .ListenButton {
-    height: 30%;
-    width: 30%;
-    background-color: dodgerblue;
-    border-radius: 50%;
-    color: aliceblue;
+    display: flex;
     font-size: 10px;
-    transition-duration: 300ms;
     cursor: default;
+    border-radius: 50%;
+    position: absolute;
+    color: aliceblue;
+    align-items: center;
+    justify-content: center;
+    transition-duration: 300ms;
+    background-color: dodgerblue;
 }
 
 .ListenButton:hover {
@@ -66,8 +21,33 @@
     background-color: #0366ee;;
 }
 
+.RippleContainer {
+    height: 100%;
+    width: 100%;
+    align-self: center;
+    text-align: center;
+  }
+  
+.RippleBox {
+    width: 75px;
+    height: 75px;
+    position: relative;
+    margin: auto;
+    margin-top: 90px;
+    margin-bottom: 80px;
+}
 
-@keyframes expandFadeOut {
+.RippleButton,
+.ListenButton {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    position: relative;
+    z-index: 2;
+}
+
+/* ripple animation */
+@keyframes rippleAnimation {
     0% {
         opacity: 0.55;
         transform: scale(0);
@@ -75,6 +55,39 @@
     
     100% {
         opacity: 0;
-        transform: scale(1);
+        transform: scale(3.3);
     }
+}
+  
+.RippleBox::before,
+.RippleButton::before,
+.RippleButton::after {
+    content: '';
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: dodgerblue;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+}
+
+.RippleBoxPlay::before {
+    z-index: 0;
+    animation: 3s 1s ease-out rippleAnimation infinite;
+}
+
+.RippleButtonPlay::before {
+    animation: 3s 2s ease-out rippleAnimation infinite;
+}
+
+.RippleButtonPlay::after {
+    animation: 3s 3s ease-out rippleAnimation infinite;
+}
+  
+.RippleBoxStop::before,
+.RippleButtonStop::before,
+.RippleButtonStop::after {
+    animation: none;
 }