animation added (#3222)

agrawalshreyansh · LaurelineP · web-flow · commit 296d28aff82b · 2025-10-31T12:42:55.000+01:00
Co-authored-by: Laureline Paris &lt;laurelinedev@gmail.com&gt;
diff --git a/Art/shreyanshagrawal-bouncing_ball/index.html b/Art/shreyanshagrawal-bouncing_ball/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Bouncing Ball Animation</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <div class="container">
+      <div class="ball"></div>
+    </div>
+  </body>
+</html>
diff --git a/Art/shreyanshagrawal-bouncing_ball/meta.json b/Art/shreyanshagrawal-bouncing_ball/meta.json
@@ -0,0 +1,4 @@
+{
+  "githubHandle": "agrawalshreyansh",
+  "artName": "bouncing_ball"
+}
diff --git a/Art/shreyanshagrawal-bouncing_ball/styles.css b/Art/shreyanshagrawal-bouncing_ball/styles.css
@@ -0,0 +1,36 @@
+body {
+  background: linear-gradient(to bottom, #87ceeb, #fff);
+  overflow: hidden;
+  margin: 0;
+  height: 100vh;
+}
+
+.container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.ball {
+  position: absolute;
+  bottom: 50px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 50px;
+  height: 50px;
+  background: radial-gradient(circle at 30% 30%, #ff6b6b, #4ecdc4);
+  border-radius: 50%;
+  animation: bounce 1.5s infinite ease-in-out;
+}
+
+@keyframes bounce {
+  0%, 100% {
+    bottom: 50px;
+    transform: translateX(-50%) scale(1);
+  }
+  50% {
+    bottom: 200px;
+    transform: translateX(-50%) scale(1.1);
+  }
+}

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +{
 +  "githubHandle": "agrawalshreyansh",
 +  "artName": "bouncing_ball"
 +}