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 پشتیبانی می کنند.