From 789ad1cd835d4dc8614e8b0ccc1a366c26331475 Mon Sep 17 00:00:00 2001
From: OCG <40301816+ornitcg@users.noreply.github.com>
Date: Sun, 29 Oct 2023 17:15:32 +0200
Subject: [PATCH] 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 | 64 ++++++++++++++++++++++++++++---
 1 file changed, 58 insertions(+), 6 deletions(-)

diff --git a/Art/Ornitcg/fallingBall/style.css b/Art/Ornitcg/fallingBall/style.css
index 877b08fb8..7fead8e08 100644
--- a/Art/Ornitcg/fallingBall/style.css
+++ b/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;
+        
     }
     
-}
\ No newline at end of file
+    100% {
+        transform: translateY(530%);
+        animation-timing-function: ease-in; 
+        
+    }
+    
+}
+