অ্যানিমেশন প্লেস্টেট প্রপার্টি অ্যানিমেশন স্টেট সেটিং বা পাওয়ার জন্য ব্যবহার করা হয় তা চলমান বা পজ করা হয়। এটি অ্যানিমেশন টগল করার জন্য দরকারী৷
সিনট্যাক্স
এর জন্য সিনট্যাক্স নিচে দেওয়া হল
অ্যানিমেশন প্লেস্টেট সম্পত্তি সেট করা হচ্ছে -
object.style.animationPlayState = "running|paused|initial|inherit"
মান
নিম্নোক্ত মান −
| Sr. No | মান ও বর্ণনা |
|---|---|
| 1 | চলছে এটি নির্দিষ্ট করে যে অ্যানিমেশনটি বর্তমানে চলছে এবং এটি ডিফল্ট মান। |
| 2 | পজ করা হয়েছে নির্দিষ্ট করার জন্য অ্যানিমেশনটি বিরতি দেওয়া হয়েছে। |
| 3 | প্রাথমিক এই সম্পত্তি প্রাথমিক মান সেট করার জন্য. |
| 4 | উত্তরাধিকার পিতামাতার সম্পত্তির মান উত্তরাধিকার সূত্রে পাওয়া। |
উদাহরণ
আসুন অ্যানিমেশন প্লেস্টেট প্রপার্টি -
-এর জন্য একটি উদাহরণ দেখি<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 70px;
height: 30px;
border: 3px solid brown;
box-shadow: 0 20px 0 -3px orchid;
z-index:-1;
position: relative;
animation: move 5s infinite;
animation-play-state: play;
}
@keyframes move {
from {top: 0px; }
to {top: 400px;}
}
</style>
<script>
function stateToggle(){
document.getElementById("DIV1").style.animationPlayState="paused";
document.getElementById("Sample").innerHTML="The animation is now paused";
}
</script>
</head>
<body>
<div id="DIV1"></div>
<p>Click the below button to toggle the above animation state</p>
<button onclick="stateToggle()">CHANGE STATE</button>
<p id="Sample"></p>
</body>
</html> আউটপুট
এটি নীচের আউটপুট তৈরি করবে যখন বক্সটি উপরে থেকে নীচে চলে যাবে -
চেঞ্জ স্টেট -
-এ ক্লিক করলে
