diff --git a/Base/res/html/misc/web-animations.html b/Base/res/html/misc/web-animations.html
new file mode 100644
index 0000000000..18349e741c
--- /dev/null
+++ b/Base/res/html/misc/web-animations.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<head>
+    <style>
+        .ball-container {
+            position: absolute;
+            width: 200px;
+            height: 400px;
+        }
+        .box {
+            position: absolute;
+            left: 300px;
+            width: 200px;
+            height: 200px;
+            background-color: blue;
+            border-radius: 10px;
+        }
+        #box1 {
+            top: 50px;
+        }
+        #box2 {
+            top: 300px;
+        }
+
+        #box3 {
+            position: absolute;
+            left: 550px;
+            width: 200px;
+            height: 200px;
+            top: 50px;
+            overflow: hidden;
+        }
+        #box3-inner {
+            width: 200px;
+            height: 450px;
+            background-color: blue;
+            border-radius: 10px;
+        }
+    </style>
+</head>
+<body>
+<svg viewBox="0 0 100 200" class="ball-container">
+    <circle id="ball0" class="ball" cx="50" cy="50" r="50" fill="rgb(220, 105, 105)"></circle>
+    <circle id="ball1" class="ball" cx="50" cy="40" r="40" fill="rgb(200, 90, 90)"></circle>
+    <circle id="ball2" class="ball" cx="50" cy="30" r="30" fill="rgb(180, 75, 75)"></circle>
+    <circle id="ball3" class="ball" cx="50" cy="20" r="20" fill="rgb(160, 60, 60)"></circle>
+    <circle id="ball4" class="ball" cx="50" cy="10" r="10" fill="rgb(140, 45, 45)"></circle>
+    <rect x="0" y="197" width="100" height="3" fill="black"></rect>
+</svg>
+<div class="box" id="box1"></div>
+<div class="box" id="box2"></div>
+<div id="box3">
+    <div id="box3-inner"></div>
+</div>
+<script>
+    for (let i = 0; i < 5; i++) {
+        const ball = document.getElementById(`ball${i}`);
+        ball.animate([
+            { transform: "translateY(0px)" },
+            { transform: `translateY(${100 + 20 * i}px)` },
+            { transform: "translateY(0px)" },
+        ], {
+            duration: 1000,
+            iterations: Infinity,
+            easing: "ease-in-out"
+        });
+    }
+
+    box1.animate({ backgroundColor: ["red"] }, {
+        duration: 2000,
+        iterations: Infinity,
+        direction: "alternate"
+    });
+
+    box2.animate({ opacity: [0] }, {
+        duration: 2000,
+        iterations: Infinity,
+        direction: "alternate",
+    });
+
+    // Discrete property animation
+    box3.animate({ overflow: ['visible'] }, {
+        duration: 2000,
+        iterations: Infinity,
+        direction: "alternate",
+    })
+</script>
+</body>
diff --git a/Base/res/html/misc/welcome.html b/Base/res/html/misc/welcome.html
index 243080ba87..fe69ba6915 100644
--- a/Base/res/html/misc/welcome.html
+++ b/Base/res/html/misc/welcome.html
@@ -203,6 +203,7 @@
             <li><a href="trigonometry.html">canvas + trigonometry functions</a></li>
             <li><a href="canvas-global-alpha.html">canvas globalAlpha</a></li>
             <li><a href="canvas-path2d.html">Path2D</a></li>
+            <li><a href="web-animations.html">Web Animations</a></li>
             <li><a href="webgl-clear-color-and-multiple-contexts.html">WebGL Demo - Multiple Contexts and glClear(Color)</a></li>
             <li><h3>Wasm</h3></li>
             <li><a href="mandelbrot-wasm.html">WebAssembly Mandelbrot Rendering Demo</a></li>
