ویژگی animation-play-state در CSS

animation-play-state Property

ویژگی animation-play-state در CSS، انیمیشن در حال اجرا و یا متوقف کردن آنرا مشخص می کند.

نحوه نوشتار

animation-play-state: running;
animation-play-state: paused;

animation-play-state: paused, running, running;

مقادیر

running​

انیمیشن در حال اجرا است.

paused​

انیمیشن متوقف شده است.

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

html

<div class="wrapper">
    <button id="toggle-animation">توقف و ادامه انیمیشن</button>
    <div id="circle"></div>
</div>

css

.wrapper {
   max-width: 500px;
   margin: 30px auto;
   text-align: center;
}
button {
   font-family: 'Segoe UI';
   margin-bottom: 30px;
}
#circle {
   width: 100px;
   height: 100px;
   background-color: orangered;
   border: 7px solid orange;
   border-radius: 100%;
   animation-name: move;
   animation-duration: 3s;
   animation-iteration-count: infinite;
   animation-direction: alternate;
   animation-timing-function: ease-in-out;
}
.paused {
    animation-play-state: paused;
}
@keyframes move {
   from {
       margin-left: 0%;
    }
    to {
       margin-left: 85%;
    }
}

js

var button = document.getElementById('toggle-animation'),
el = document.getElementById('circle');

button.onclick = function(){
   el.classList.toggle('paused');
}

پشتیبانی مرورگرها
تمام مرورگرها از این سودو کلاس در CSS پشتیبانی می کنند.