সিএসএস এর কত গুলো animatable প্রোপার্টি আছে অর্থাৎ এই সব সিএসএস প্রপার্টি গুলো ব্যবহার করে এনিমেশন ও ট্রানজিশন তৈরি করা যায়, যেমন - background, border, box-shadow, flex, opacity, text-shadow ইত্যাদি। আকার, সংখ্যা, শতকরা, রঙ এর মত animatable প্রোপার্টিগুলোকেও এক মান থেকে অন্য মানে পরিবর্তন করা যায়।
নিচে সিএসএস অ্যানিমেশন এর একটি বাবহারিক উদাহরন দেখুন।
ওপরের উদাহরণটির মত একটি অ্যানিমেশন তৈরি করতে নিচের সিএসএস স্টাইল কোড গুলো দেখুন।
/* Code for old Chrome, Safari and Opera */ @-webkit-keyframes mymove { from {background-color: blue;} to {background-color: red;} } /* Standard syntax */ @keyframes mymove { from {background-color: blue;} to {background-color: red;} }
নিচের টেবিলে দেয়া রো গুলোর প্রথম লাইন ব্রাউজারের সেই প্রথম সংস্করণ বা version নির্দেশ করে যেগুলো পুরোপুরি এই প্রপার্টি গুলো সমর্থন বা support করে। এছাড়াও এর পরের লাইন -webkit- এবং -moz- ফ্রিফিক্স যুক্ত সংস্করণ বা version গুলো নির্দেশ করে, যা ব্রাউজারের ঐ প্রথম ভার্সন যেগুলো প্রিফিক্স ব্যবহার করে প্রদর্শিত হতে পারে।
43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
নিচে সিএসএস এর সকল Animatable প্রপার্টি গুলোর নাম দেখুন।
প্রোপার্টি | বর্ণনা |
---|---|
border | |
border-bottom | |
border-bottom-color | |
border-bottom-left-radius | |
border-bottom-right-radius | |
border-top-left-radius | |
border-top-right-radius | |
border-bottom-width | |
border-color | |
border-left | |
border-left-color | |
border-left-width | |
border-right | |
border-right-color | |
border-right-width | |
border-spacing | |
border-top | |
border-top-color | |
border-top-width | |
background | |
background-size | |
background-color | |
background-position | |
bottom | |
box-shadow | |
clip | |
color | |
column-count | |
column-gap | |
column-rule | |
column-rule-color | |
column-rule-width | |
column-width | |
columns | |
filter | |
flex | |
flex-basis | |
flex-grow | |
flex-shrink | |
font | |
font-size | |
font-size-adjust | |
font-stretch | |
font-weight | |
grid | |
grid-area | |
grid-auto-columns | |
grid-auto-flow | |
grid-auto-rows | |
grid-column | |
grid-column-end | |
grid-column-gap | |
grid-column-start | |
grid-gap | |
grid-row | |
grid-row-end | |
grid-row-gap | |
grid-row-start | |
grid-template | |
grid-template-areas | |
grid-template-columns | |
grid-template-rows | |
height | |
left | |
letter-spacing | |
line-height | |
margin | |
margin-bottom | |
margin-left | |
margin-right | |
margin-top | |
max-height | |
max-width | |
min-height | |
min-width | |
object-position | |
opacity | |
order | |
outline | |
outline-color | |
outline-offset | |
outline-width | |
padding | |
padding-bottom | |
padding-left | |
padding-right | |
padding-top | |
perspective | |
perspective-origin | |
right | |
text-decoration-color | |
text-indent | |
text-shadow | |
top | |
transform | |
transform-origin | |
vertical-align | |
visibility | |
width | |
word-spacing | |
z-index |