Live match animation

src/app/match-details/match-details.page.html

@@ -168,6 +168,10 @@
                 <li (click)="selectPlayerDetails()">
                     <img [src]="matchData.away.players[1].image">
                 </li>
+
+                <li>
+                    <img src="assets/icons/ball.png">
+                </li>
             </ul>
         </div>
     

src/app/match-details/match-details.page.scss

@@ -227,6 +227,15 @@ ion-content {
         &:nth-child(9) {
             left: 40%;
             top: 80%;
+            animation: bowlerMovement 1.5s forwards linear;
+        }
+
+        @keyframes bowlerMovement {
+            0% {
+                transform: translate(0, 0);
+            } 100% {
+                transform: translate(0, -20vh);
+            }
         }
 
         &:nth-child(10) {
@@ -242,11 +251,59 @@ ion-content {
         &:nth-child(12) {
             left: 45%;
             top: 53%;
+            animation: runUp 1s forwards linear;
+            animation-delay: 2.8s;
+        }
+
+        @keyframes runUp {
+            0% {
+                transform: translate(0,0);
+            } 100% {
+                transform: translate(-5vw, -15vh);
+            }
         }
 
         &:nth-child(13) {
             left: 42%;
             top: 33%;
+
+            animation: runDown 1s forwards linear;
+            animation-delay: 3s;
+        }
+
+        @keyframes runDown {
+            0% {
+                transform: translate(0,0);
+            } 100% {
+                transform: translate(-5vw, 15vh);
+            }
+        }
+
+        &:nth-child(14) {
+            left: 37%;
+            top: 82%;
+
+            img {
+                width: 30px;
+                height: 30px;
+            }
+
+            &::after {
+                display: none;
+            }
+
+
+            animation: ballMovement 5s forwards linear;
+        }
+
+        @keyframes ballMovement {
+            0% {
+                transform: translate(0, 0);
+            } 50% {
+                transform: translate(0, -35vh);
+            } 100% {
+                transform: translate(50vw, 10vh);
+            }
         }
     }
 }
@@ -581,6 +638,10 @@ ion-content {
 .player-list {
     background: linear-gradient(0deg, $voilet 50%, $dark-voilet);
     margin-top: 78px;
+    position: sticky;
+    top: 0px;
+    z-index: 0;
+    left: 0;
 
     ul {
         list-style: none;