در جاوااسکریپت، می‌توان انیمیشن و حرکت عناصر HTML را به صورت دینامیک ایجاد کرد.
با استفاده از DOM، CSS و توابع جاوااسکریپت می‌توان افکت‌های ساده و تعاملی روی صفحه وب پیاده‌سازی کرد.

🔹 1. تغییر موقعیت عنصر با style

• ساده‌ترین روش انیمیشن، تغییر موقعیت عناصر با جاوااسکریپت است

let box = document.getElementById("box");
let pos = 0;

function moveRight() {
  if(pos >= 300) return; // حد حرکت
  pos += 5; // سرعت حرکت
  box.style.left = pos + "px";
  requestAnimationFrame(moveRight); // ادامه حرکت
}

moveRight();

نکته: عنصر باید position مشخص داشته باشد (relative, absolute, fixed)

#box {
  position: absolute;
  top: 50px;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: red;
}

🔹 2. استفاده از setInterval یا setTimeout

• انیمیشن می‌تواند با تابع تکرارشونده ایجاد شود

let box = document.getElementById("box");
let pos = 0;

let interval = setInterval(() => {
  if(pos >= 300) clearInterval(interval);
  pos += 5;
  box.style.left = pos + "px";
}, 20);

🔹 3. انیمیشن با کلاس‌ها و CSS

• اضافه کردن کلاس برای تغییر استایل و انیمیشن

• استفاده از transition یا keyframes در CSS

/* CSS */
#box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  transition: all 0.5s ease;
}

.move {
  transform: translateX(300px);
  background-color: blue;
}

let box = document.getElementById("box");
box.classList.add("move"); // شروع انیمیشن

🔹 4. انیمیشن با requestAnimationFrame

• روش حرفه‌ای‌تر و روان‌تر از setInterval

• هماهنگ با فریم‌های مرورگر برای عملکرد بهتر

let box = document.getElementById("box");
let pos = 0;

function animate() {
  if(pos < 300) {
    pos += 2;
    box.style.left = pos + "px";
    requestAnimationFrame(animate);
  }
}

animate();

🔹 5. تغییر همزمان چند ویژگی

let box = document.getElementById("box");
let pos = 0;
let size = 100;

function animate() {
  if(pos >= 300) return;
  pos += 2;
  size += 1;
  box.style.left = pos + "px";
  box.style.width = size + "px";
  box.style.height = size + "px";
  requestAnimationFrame(animate);
}

animate();

✅ خلاصه

• انیمیشن در جاوااسکریپت → تغییر موقعیت، اندازه، رنگ و ظاهر عناصر

• روش‌ها:

  1. تغییر مستقیم با style

  2. استفاده از setInterval یا setTimeout

  3. کلاس‌ها و CSS (transition, keyframes)

  4. requestAnimationFrame → روان‌تر و بهینه‌تر

• می‌توان چند ویژگی را همزمان تغییر داد و انیمیشن‌های پیچیده ساخت