সিএসএস Animatable
সংজ্ঞা এবং ব্যবহার
কিছু সিএসএস প্রোপার্টি animatable অর্থাৎ এদেরকে এনিমেশন ও ট্রানজিশন করতে ব্যবহার করা যায়।
সাইজ, নম্বর, শতকরা, কালার এর মত animatable প্রোপার্টিগুলোকেও এক মান থেকে অন্য মানে পরিবর্তন করা যায়।
ব্যাকগ্রাউন্ড-কালার লাল থেকে নীলে এনিমেট করেঃ
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDiv {
width: 300px;
height: 200px;
background: red;
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* অপেরা, ক্রোম, ও সাফারির জন্য */
@-webkit-keyframes mymove {
from {background-color: green;}
to {background-color: yellow;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
from {background-color: green;}
to {background-color: yellow;}
}
</style>
</head>
<body>
<p>background-color প্রোপার্টি ধীরে ধীরে সবুজ থেকে হলুদ কালারে পরিবর্তন হচ্ছেঃ<p>
<div id="thisDiv"></div>
<p> background-position প্রোপার্টি CSS এর মাধ্যমে এনিমেটেড করা হয়েছে।</p>
<p><b>নোট:</b> CSS এনিমেশন ইন্টানেট এক্সপ্লোরার ৯ এবং আগের ভার্সনে সমর্থন করে না।</p>
</body>
</html>
ফলাফল
animatable প্রোপার্টি
এই প্রোপার্টিগুলো সিএসএস এ animatable :