diff --git a/src/app/match-details/match-details.page.html b/src/app/match-details/match-details.page.html
index 6f95259..a563f86 100644
--- a/src/app/match-details/match-details.page.html
+++ b/src/app/match-details/match-details.page.html
@@ -168,6 +168,10 @@
+
+
+
+
diff --git a/src/app/match-details/match-details.page.scss b/src/app/match-details/match-details.page.scss
index 3c966ae..11086ee 100644
--- a/src/app/match-details/match-details.page.scss
+++ b/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;