improved my animation (#2380)

* my falling ball animation

* corrected path on include.js

* added stars animation

* replaced wrong file with the right gif file

* improved css file

---------

Co-authored-by: Laureline Paris <32878345+LaurelineP@users.noreply.github.com>

Art/Ornitcg/fallingBall/style.css

@@ -19,16 +19,68 @@ body {
     height: 150px;
     width: 150px;
     background: radial-gradient(circle at 20px 20px, #FAF803, #ffffff);
-    border-radius: 50%;    
-    transition: transform 3s cubic-bezier(0.98, 0.05, 0.54, 0.95)n; 
+    border-radius: 50%; 
+    background: radial-gradient(circle at 20px 20px, #EB3BED, #ffffff);
 
+    animation: bounce 6s infinite;
 
 }
 
-body:hover {
-    .ball {
-        background: radial-gradient(circle at 20px 20px, #EB3BED, #ffffff);
+@keyframes bounce {
+    0% {
+        transform: translateY(0%);
+        animation-timing-function: ease-in;
+
+    }
+
+    15% {
+        transform: translateY(530%);
+        animation-timing-function: ease-in;
+
+    }    
+
+    35%{
+        transform: translateY(200%);
+        animation-timing-function: ease-in;
+
+    }
+    50%{
+        transform: translateY(530%);
+        animation-timing-function: ease-in;
+
+    } 
+    60%{
+        transform: translateY(350%);
+        animation-timing-function: ease-out;
+
+
+    } 
+    70%{
+        transform: translateY(530%);
+        animation-timing-function: ease-in;
+
+    } 
+    80%{
+        transform: translateY(450%);
+        animation-timing-function: ease-out;
+
+    } 
+    90%{
+        transform: translateY(530%);
+        animation-timing-function: ease-in;
+
+    } 
+    95%{
         transform: translateY(500%);
+        animation-timing-function: ease-out;
+
     }
 
-}
+    100% {
+        transform: translateY(530%);
+        animation-timing-function: ease-in; 
+
+    }
+
+}
+