learned more about animation with animation property and @Keyframes

aaarajuan · Jul 18, 2023 · 0dd2487 · 0dd2487
1 parent a5dbbf9
commit 0dd2487
Showing 1 changed file with 50 additions and 0 deletions.
diff --git a/css3-features/animation.html b/css3-features/animation.html
@@ -4,8 +4,58 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Animation</title>
+    <style>
+        @keyframes ping-pong{
+            from{
+                left: 0;
+            }
+            to{
+                left: 600px;
+                background-color: red;
+            }
+        }
+        @keyframes bounce {
+            0%{
+                top: 0;
+                left: 0;
+            }
+            25%{
+                left: 150px;
+                top: 200px;
+                background-color: red;
+            }
+            50%{
+                left: 300px;
+                top: 0;
+                background-color: yellow;
+            }
+            100%{
+                left: 500px;
+                top: 200px;
+                background-color: green;
+            }
+        }
+        .stage{
+            width: 700px;
+            height: 300px;
+            border: 2px solid steelblue;
+            background-color: aqua;
+        }
+        .ball{
+            width: 100px;
+            height: 100px;
+            border-radius: 50%;
+            background-color: yellow;
+            position: relative;
+            /* animation: ping-pong 2s ease-in-out 1s 5 alternate; */
+            animation: bounce 3s ease-in-out 1s infinite alternate;
+        }
+    </style>
 </head>
 <body>
     <h2>Explore Animation</h2>
+    <div class="stage">
+        <div class="ball"></div>
+    </div>
 </body>
 </html>