سلام آنامیخوام به یه css animation وقفه و استراحت بدم

سلام، می‌توانید از animation-play-state استفاده کنید تا انیمیشن را متوقف کنید. مقدار paused برای این ویژگی استفاده می‌شود:

animation-play-state: paused;

همچنین، می‌توانید با استفاده از جاوااسکریپت، این ویژگی را به صورت دینامیک تغییر دهید. به عنوان مثال، با کلیک بر روی یک المان، انیمیشن متوقف شده و با کلیک دوباره، انیمیشن ادامه پیدا می‌کند:

const element = document.querySelector('.my-element');
let isPaused = false;

element.addEventListener('click', () => {
  isPaused = !isPaused;
  element.style.animationPlayState = isPaused ? 'paused' : 'running';
});

در کد بالا، ابتدا المانی با کلاس .my-element را انتخاب کرده و یک متغیر isPaused برای ذخیره وضعیت وقفه شده یا نشده انیمیشن تعریف شده است. سپس با کلیک بر روی المان، مقدار isPaused تغییر کرده و وضعیت انیمیشن با استفاده از animation-play-state تغییر می‌کند.