animation-play-state

با استفاده از ویژگی animation-play-state می توان یک انیمیشن را متوقف کرد و یا به حرکت در آورد.

زمانی که مقدار این ویژگی برای یک انیمیشن برابر با paused شود انیمیشن در هر موقعیتی که باشد متوقف می شود و به محض اینکه مقدار این ویژگی برابر با running شود انیمیشن از همان نقطه ای که متوقف شده بود به کار خود ادامه می دهد. مقدار پیشفرض این ویژگی running است.

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

.element {
  animation: spin 3s infinite paused;
}

.element:hover {
  animation-play-state: running;
}

در مثال زیر نشانه گر را بر روی شی قرار دهید:

See the Pen animation-play-state by Mojtaba Seyedi (@seyedi) on CodePen.

مثل دیگر ویژگی های انیمیشن این ویژگی نیز می تواند به صورت لیست جدا شده بوسیله ویرگول برای انیمیشن های مختلف بر روی یک عنصر تنظیم شود. وقتی از این روش برای تعیین تکرار چند انیمیشن بصورت یکجا استفاده می کنید باید توجه داشته باشید که ترتیب آن ها برای تعیین ویژگی های دیگر انیمیشن از قبیل animation-delay, animation-duration, animation-name و غیره, اهمیت خواهد داشت.

.element {
  animation-name: bounce, shake, slide;
  animation-duration: 1s, .3s, 500ms;
  animation-timing-function: ease-out, ease, linear;
  animation-play-state: running, paused, running;
}

در مثال زیر تغییر این حالت زمانی اتفاق می افتد که یک کلاس توسط جاوااسکریپت به عنصر اضافه می شود و با استفاده از آن کلاس ویژگی animation-play-state مقدارش تغییر می کند:

See the Pen animation-play-state by Mojtaba Seyedi (@seyedi) on CodePen.

پشتیبانی مرورگر ها