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; + + } + +} +