add pebbles bounce animation (#2903)

Nikhila1003 · web-flow · commit e441b2ed3191 · 2025-01-13T16:02:52.000+01:00
* add pebbles bounce animation

* update style.css to styles.css
diff --git a/Art/nikhila1003-pebblesbounce/index.html b/Art/nikhila1003-pebblesbounce/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Animation</title>
+        <link rel="stylesheet" href="styles.css">
+    </head>
+    <body class="body">
+        <div class="anime">
+            <div class="pebble1"></div>
+            <div class="pebble2"></div>
+            <div class="pebble3"></div>
+            <div class="pebble4"></div>
+            <div class="pebble5"></div>  
+        </div>
+    </body>
+</html>
diff --git a/Art/nikhila1003-pebblesbounce/meta.json b/Art/nikhila1003-pebblesbounce/meta.json
@@ -0,0 +1,4 @@
+{
+    "artName": "pebblesbounce",
+    "githubHandle": "Nikhila1003"
+  }
diff --git a/Art/nikhila1003-pebblesbounce/styles.css b/Art/nikhila1003-pebblesbounce/styles.css
@@ -0,0 +1,84 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+.body {
+    height: 100vh;
+    width: 100vw;
+    background-color:white;
+    display: flex; 
+    justify-content: center; 
+    align-items: center; 
+    overflow: hidden;
+}
+
+.anime {
+    height: 100vh;
+    width: 100vw;
+    display: flex;
+    position: relative;
+    background-color: #226666;
+    justify-content: space-around;
+    overflow: hidden;
+}
+
+.pebble1, .pebble2, .pebble3, .pebble4, .pebble5 {
+    margin-top: 10px;
+    background: #B8BBBB; 
+    height: 12px;
+    width: 12px;
+    border-radius: 50%; 
+    animation: bounce 3s infinite ease-in-out;
+}
+
+.pebble1 {
+    animation-delay: 0s;
+}
+
+.pebble2 {
+    animation-delay: 0.2s;
+}
+
+.pebble3 {
+    animation-delay: 0.4s;
+}
+
+.pebble4 {
+    animation-delay: 0.6s;
+}
+
+.pebble5 {
+    animation-delay: 0.8s;
+}
+
+.anime::after {
+  content: '';
+  position: absolute;
+  bottom: 10vh; 
+  width: 95vw; 
+  height: 5px; 
+  background: #B8BBBB; 
+}
+
+@keyframes bounce {
+    0% {
+        transform: translate(0, 0); 
+    }
+    20% {
+        transform: translate(-4vw, 87vh); 
+    }
+    40% {
+        transform: translate(-2vw, 35vh); 
+    }
+    60% {
+        transform: translate(0vw, 87vh); 
+    }
+    80% {
+        transform: translate(2vw, 60vh);
+    }
+    100% {
+        transform: translate(4vw, 87vh); 
+    }
+}

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