diff --git a/JavaScript/Advance/DOM/7. DOM Animation/css/style.css b/JavaScript/Advance/DOM/7. DOM Animation/css/style.css
new file mode 100644
index 0000000..e542cae
--- /dev/null
+++ b/JavaScript/Advance/DOM/7. DOM Animation/css/style.css
@@ -0,0 +1,21 @@
+.container {
+ width: 400px;
+ height: 400px;
+ position: relative;
+ background: yellow;
+}
+
+.animate {
+ width: 50px;
+ height: 50px;
+ position: absolute;
+ background: red;
+}
+
+button {
+ margin-bottom: 20px;
+}
+
+h2 {
+ font-family: monospace;
+}
\ No newline at end of file
diff --git a/JavaScript/Advance/DOM/7. DOM Animation/images/js-logo.png b/JavaScript/Advance/DOM/7. DOM Animation/images/js-logo.png
new file mode 100644
index 0000000..4637ac9
Binary files /dev/null and b/JavaScript/Advance/DOM/7. DOM Animation/images/js-logo.png differ
diff --git a/JavaScript/Advance/DOM/7. DOM Animation/index.html b/JavaScript/Advance/DOM/7. DOM Animation/index.html
new file mode 100644
index 0000000..72281da
--- /dev/null
+++ b/JavaScript/Advance/DOM/7. DOM Animation/index.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
+ DOM-Animation
+
+
+
+
+
+ DOM Animation
+ Example
+
+
+
+
+
+
\ No newline at end of file
diff --git a/JavaScript/Advance/DOM/7. DOM Animation/script.js b/JavaScript/Advance/DOM/7. DOM Animation/script.js
new file mode 100644
index 0000000..1868820
--- /dev/null
+++ b/JavaScript/Advance/DOM/7. DOM Animation/script.js
@@ -0,0 +1,17 @@
+function Move() {
+ let id = null;
+ const elem = document.querySelector('.animate');
+ let pos = 0;
+ clearInterval(id);
+ id = setInterval(frame, 5);
+
+ function frame() {
+ if (pos == 350) {
+ clearInterval(id);
+ } else {
+ pos++;
+ elem.style.top = pos + "px";
+ elem.style.left = pos + "px";
+ }
+ }
+}
\ No newline at end of file