সিএসএস Animatable এর উদাহরণ পেজ
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDiv {
margin: auto;
border: 1px solid teal;
outline: coral solid 5px;
width: 300px;
height: 300px;
-webkit-animation: mymove 5s infinite; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
animation: mymove 5s infinite;
}
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
50% {outline-width: 50px;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {outline-width: 50px;}
}
</style>
</head>
<body>
<p>ধীরে ধীরে outline-width প্রোপার্টিটি 5px থেকে 50px হবে এবং আবার 5px এ পরিবর্তিত হবে :<p>
<div id="thisDiv"></div>
<p> outline-width প্রোপার্টিটি <em>animatable</em> CSS এ।</p>
<p><strong>নোট:</strong> ইন্টারনেট এক্সপ্লোরার 9 এবং তার নতুন ভার্সনে CSS Animations কাজ করে না ।</p>
</body>
</html>
ফলাফল
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDiv {
background-color: lightgreen;
border: 1px solid teal;
-webkit-animation: mymove 5s infinite; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
animation: mymove 5s infinite;
}
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
50% {padding: 50px;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {padding: 50px;}
}
</style>
</head>
<body>
<p> padding ধীরে ধীরে ০ থেকে ৫০ পিক্সেলে পরিবর্তন হচ্ছে এবং পুনরায় ০ পিক্সেলে ফিরে আসছেঃ<p>
<div id="thisDiv">
১৯২১ সালে তদানীন্তন ব্রিটিশ ভারতে অক্সব্রিজ শিক্ষা ব্যবস্থা অনুসরণে এটি স্থাপিত হয়।
সূচনালগ্নে বিভিন্ন প্রথিতযশা বৃত্তিধারী ও বিজ্ঞানীদের দ্বারা কঠোরভাবে মান নিয়ন্ত্রিত হবার প্রেক্ষাপটে এটি প্রাচ্যের অক্সফোর্ড নামে স্বীকৃতি পায়।
বাংলাদেশের উচ্চ শিক্ষিত সম্প্রদায়ের প্রায় দুই-তৃতীয়াংশ এই বিশ্ববিদ্যালয়ের ছাত্র-ছাত্রী।
ঢাকা বিশ্ববিদ্যালয়ের শিক্ষকবৃন্দ সবচেয়ে বেশিসংখ্যক বাংলাদেশ বিজ্ঞান একাডেমি পদক লাভ করেছেন।
এছাড়াও, এটি বাংলাদেশের সর্ববৃহৎ ও একমাত্র বিশ্ববিদ্যালয় হিসেবে এশিয়াউইকের পক্ষ থেকে শীর্ষ ১০০ বিশ্ববিদ্যালয়ে জায়গা করে নেয়।
এখানে প্রায় ৩৩,৫০০ ছাত্র-ছাত্রী এবং ১,৮০৫ জন শিক্ষক রয়েছে৷
</div>
<p>padding প্রোপার্টি CSS এর মাধ্যমে এনিমেটেড করা হয়েছে।</p>
<p><b>নোট:</b> CSS এনিমেশন ইন্টারনেট এক্সপ্লোরার ৯ এবং আগের ভার্সনে সাপোর্ট করে না।</p>
</body>
</html>
ফলাফল
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDiv {
background-color: lightgreen;
border: 1px solid teal;
-webkit-animation: mymove 5s infinite; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
animation: mymove 5s infinite;
}
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
50% {padding-bottom: 50px;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {padding-bottom: 50px;}
}
</style>
</head>
<body>
<p>padding-bottom প্রোপার্টি ধীরে ধীরে ০ থেকে ৫০ পিক্সেলে পরিবর্তন হচ্ছে এবং পুনরায় ০ পিক্সেলে ফিরে আসছেঃ<p>
<div id="thisDiv">
১৯২১ সালে তদানীন্তন ব্রিটিশ ভারতে অক্সব্রিজ শিক্ষা ব্যবস্থা অনুসরণে এটি স্থাপিত হয়।
সূচনালগ্নে বিভিন্ন প্রথিতযশা বৃত্তিধারী ও বিজ্ঞানীদের দ্বারা কঠোরভাবে মান নিয়ন্ত্রিত হবার প্রেক্ষাপটে এটি প্রাচ্যের অক্সফোর্ড নামে স্বীকৃতি পায়।
বাংলাদেশের উচ্চ শিক্ষিত সম্প্রদায়ের প্রায় দুই-তৃতীয়াংশ এই বিশ্ববিদ্যালয়ের ছাত্র-ছাত্রী।
ঢাকা বিশ্ববিদ্যালয়ের শিক্ষকবৃন্দ সবচেয়ে বেশিসংখ্যক বাংলাদেশ বিজ্ঞান একাডেমি পদক লাভ করেছেন।
এছাড়াও, এটি বাংলাদেশের সর্ববৃহৎ ও একমাত্র বিশ্ববিদ্যালয় হিসেবে এশিয়াউইকের পক্ষ থেকে শীর্ষ ১০০ বিশ্ববিদ্যালয়ে জায়গা করে নেয়।
এখানে প্রায় ৩৩,৫০০ ছাত্র-ছাত্রী এবং ১,৮০৫ জন শিক্ষক রয়েছে৷
</div>
<p>padding-bottom প্রোপার্টি CSS এর মাধ্যমে এনিমেটেড করা হয়েছে।</p>
<p><b>নোট:</b> CSS এনিমেশন ইন্টারনেট এক্সপ্লোরার ৯ এবং আগের ভার্সনে সাপোর্ট করে না।</p>
</body>
</html>
ফলাফল
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDiv {
background-color: lightgreen;
border: 1px solid teal;
-webkit-animation: mymove 5s infinite; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
animation: mymove 5s infinite;
}
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
50% {padding-left: 50px;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {padding-left: 50px;}
}
</style>
</head>
<body>
<p> padding-left প্রোপার্টি ধীরে ধীরে ০ থেকে ৫০ পিক্সেলে পরিবর্তন হচ্ছে এবং পুনরায় ০ পিক্সেলে ফিরে আসছেঃ<p>
<div id="thisDiv">
১৯২১ সালে তদানীন্তন ব্রিটিশ ভারতে অক্সব্রিজ শিক্ষা ব্যবস্থা অনুসরণে এটি স্থাপিত হয়।
সূচনালগ্নে বিভিন্ন প্রথিতযশা বৃত্তিধারী ও বিজ্ঞানীদের দ্বারা কঠোরভাবে মান নিয়ন্ত্রিত হবার প্রেক্ষাপটে এটি প্রাচ্যের অক্সফোর্ড নামে স্বীকৃতি পায়।
বাংলাদেশের উচ্চ শিক্ষিত সম্প্রদায়ের প্রায় দুই-তৃতীয়াংশ এই বিশ্ববিদ্যালয়ের ছাত্র-ছাত্রী।
ঢাকা বিশ্ববিদ্যালয়ের শিক্ষকবৃন্দ সবচেয়ে বেশিসংখ্যক বাংলাদেশ বিজ্ঞান একাডেমি পদক লাভ করেছেন।
এছাড়াও, এটি বাংলাদেশের সর্ববৃহৎ ও একমাত্র বিশ্ববিদ্যালয় হিসেবে এশিয়াউইকের পক্ষ থেকে শীর্ষ ১০০ বিশ্ববিদ্যালয়ে জায়গা করে নেয়।
এখানে প্রায় ৩৩,৫০০ ছাত্র-ছাত্রী এবং ১,৮০৫ জন শিক্ষক রয়েছে৷
</div>
<p> padding-left প্রোপার্টি CSS এর মাধ্যমে এনিমেটেড করা হয়েছে।.</p>
<p><b>নোট:</b> CSS এনিমেশন ইন্টারনেট এক্সপ্লোরার ৯ এবং আগের ভার্সনে সাপোর্ট করে না।</p>
</body>
</html>
ফলাফল
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDiv {
background-color: lightgreen;
border: 1px solid teal;
-webkit-animation: mymove 5s infinite; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
animation: mymove 5s infinite;
}
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
50% {padding-right: 150px;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {padding-right: 150px;}
}
</style>
</head>
<body>
<p> padding-right প্রোপার্টি ধীরে ধীরে ০ থেকে ১৫০ পিক্সেলে পরিবর্তন হচ্ছে এবং পুনরায় ০ পিক্সেলে ফিরে আসছেঃ<p>
<div id="thisDiv">
১৯২১ সালে তদানীন্তন ব্রিটিশ ভারতে অক্সব্রিজ শিক্ষা ব্যবস্থা অনুসরণে এটি স্থাপিত হয়।
সূচনালগ্নে বিভিন্ন প্রথিতযশা বৃত্তিধারী ও বিজ্ঞানীদের দ্বারা কঠোরভাবে মান নিয়ন্ত্রিত হবার প্রেক্ষাপটে এটি প্রাচ্যের অক্সফোর্ড নামে স্বীকৃতি পায়।
বাংলাদেশের উচ্চ শিক্ষিত সম্প্রদায়ের প্রায় দুই-তৃতীয়াংশ এই বিশ্ববিদ্যালয়ের ছাত্র-ছাত্রী।
ঢাকা বিশ্ববিদ্যালয়ের শিক্ষকবৃন্দ সবচেয়ে বেশিসংখ্যক বাংলাদেশ বিজ্ঞান একাডেমি পদক লাভ করেছেন।
এছাড়াও, এটি বাংলাদেশের সর্ববৃহৎ ও একমাত্র বিশ্ববিদ্যালয় হিসেবে এশিয়াউইকের পক্ষ থেকে শীর্ষ ১০০ বিশ্ববিদ্যালয়ে জায়গা করে নেয়।
এখানে প্রায় ৩৩,৫০০ ছাত্র-ছাত্রী এবং ১,৮০৫ জন শিক্ষক রয়েছে৷
</div>
<p> padding-right প্রোপার্টি CSS এর মাধ্যমে এনিমেটেড করা হয়েছে।.</p>
<p><b>নোট:</b> CSS এনিমেশন ইন্টারনেট এক্সপ্লোরার ৯ এবং আগের ভার্সনে সাপোর্ট করে না।</p>
</body>
</html>
ফলাফল
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDiv {
background-color: lightgreen;
border: 1px solid teal;
-webkit-animation: mymove 5s infinite; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
animation: mymove 5s infinite;
}
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
50% {padding-top: 50px;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {padding-top: 50px;}
}
</style>
</head>
<body>
<p> padding-top প্রোপার্টি ধীরে ধীরে ০ থেকে ৫০ পিক্সেলে পরিবর্তন হচ্ছে এবং পুনরায় ০ পিক্সেলে ফিরে আসছেঃ<p>
<div id="thisDiv">
১৯২১ সালে তদানীন্তন ব্রিটিশ ভারতে অক্সব্রিজ শিক্ষা ব্যবস্থা অনুসরণে এটি স্থাপিত হয়।
সূচনালগ্নে বিভিন্ন প্রথিতযশা বৃত্তিধারী ও বিজ্ঞানীদের দ্বারা কঠোরভাবে মান নিয়ন্ত্রিত হবার প্রেক্ষাপটে এটি প্রাচ্যের অক্সফোর্ড নামে স্বীকৃতি পায়।
বাংলাদেশের উচ্চ শিক্ষিত সম্প্রদায়ের প্রায় দুই-তৃতীয়াংশ এই বিশ্ববিদ্যালয়ের ছাত্র-ছাত্রী।
ঢাকা বিশ্ববিদ্যালয়ের শিক্ষকবৃন্দ সবচেয়ে বেশিসংখ্যক বাংলাদেশ বিজ্ঞান একাডেমি পদক লাভ করেছেন।
এছাড়াও, এটি বাংলাদেশের সর্ববৃহৎ ও একমাত্র বিশ্ববিদ্যালয় হিসেবে এশিয়াউইকের পক্ষ থেকে শীর্ষ ১০০ বিশ্ববিদ্যালয়ে জায়গা করে নেয়।
এখানে প্রায় ৩৩,৫০০ ছাত্র-ছাত্রী এবং ১,৮০৫ জন শিক্ষক রয়েছে৷
</div>
<p> padding-top প্রোপার্টি CSS এর মাধ্যমে এনিমেটেড করা হয়েছে।</p>
<p><b>নোট:</b> CSS এনিমেশন ইন্টারনেট এক্সপ্লোরার ৯ এবং আগের ভার্সনে সাপোর্ট করে না।</p>
</body>
</html>
ফলাফল
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
position: relative;
margin: auto;
height: 150px;
width: 250px;
padding: 10px;
border: 1px solid teal;
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
-webkit-perspective: 200px;
-webkit-animation: mymove 5s infinite;
/* স্ট্যান্ডার্ড সিনট্যাক্স */
animation: mymove 5s infinite;
perspective: 200px;
}
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
50% {-webkit-perspective: 100px;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {perspective: 100px;}
}
#thisDiv1 {
padding: 50px;
position: absolute;
border: 1px solid teal;
background-color: yellow;
-webkit-transform: rotateX(45deg); /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
transform: rotateX(45deg);
}
</style>
</head>
<body>
<p>perspective প্রোপার্টি CSS এর মাধ্যমে এনিমেটেড করা হয়েছে।</p>
<div id="div1">DIV1
<div id="thisDiv1"> চিন্তা করুন আপনি একটি ওয়ালের দিকে তাকিয়ে আছেন। দেখুন perspective প্রোপার্টি ধীরে ধীরে পরিবর্তন হলে কি হয়।</div>
</div>
<p><b>নোট:</b> CSS এনিমেশন ইন্টারনেট এক্সপ্লোরার ৯ এবং আগের ভার্সনে সাপোর্ট করে না।</p>
</body>
</html>
ফলাফল
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
position: relative;
margin: auto;
height: 150px;
width: 250px;
padding: 10px;
border: 1px solid teal;
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
-webkit-perspective: 125px;
-webkit-animation: mymove 5s infinite;
/* স্ট্যান্ডার্ড সিনট্যাক্স */
perspective: 125px;
animation: mymove 5s infinite;
}
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
50% {-webkit-perspective-origin: 10px 50%;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {perspective-origin: 10px 50%;}
}
#thisDiv1 {
padding: 50px;
position: absolute;
border: 1px solid teal;
background-color: coral;
-webkit-transform: rotateX(45deg); /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
transform: rotateX(45deg);
}
</style>
</head>
<body>
<p> perspective-origin প্রোপার্টি CSS এর মাধ্যমে এনিমেটেবল করা হয়েছে।</p>
<div id="div1">DIV1
<div id="thisDiv1"> চিন্তা করুন আপনি একটি ওয়ালের দিকে তাকিয়ে আছেন। দেখুন perspective প্রোপার্টি ধীরে ধীরে পরিবর্তন হলে কি হয়।</div>
</div>
<p><b>নোট:</b> CSS এনিমেশন ইন্টানেট এক্সপ্লোরার ৯ এবং তার আগের ভার্সনে সাপোর্ট করে না।</p>
</body>
</html>
ফলাফল
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDiv {
position: absolute;
right: 0;
width: 180px;
height: 100px;
background-color: coral;
color: white;
-webkit-animation: mymove 5s infinite; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
animation: mymove 5s infinite;
}
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
50% {right: 500px;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {right: 500px;}
}
</style>
</head>
<body>
<p> right প্রোপার্টি CSS এর মাধ্যমে এনিমেটেড করা হয়েছে।</p>
<p><b>নোটঃ</b> CSS এনিমেশন ইন্টারনেট এক্সপ্লোরার ৯ এবং আগের ভার্সনে সাপোর্ট করে না।</p>
<p> DIV এলিমেন্ট এর right পজিশন ধীরে ধীরে ০ থেকে ৫০০ পিক্সেলে পরিবর্তন হচ্ছে এবং পুনরায় ০ পিক্সেলে ফিরে আসছেঃ <p>
<div id="thisDiv">
<h1> SATT IT</h1>
</div>
</body>
</html>
ফলাফল
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDiv {
text-decoration: underline;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {
-moz-text-decoration-color: yellow; /* Firefox */
-moz-text-decoration-color: yellow;
}
}
</style>
</head>
<body>
<p> নিচের লাইনটি সাধারনত কালো থেকে হলুদ এবং আবার হলুদ হবে। <p>
<div id="thisDiv">
<p> আমাদের স্যাট একাডেমী।</p>
</div>
<p>সিএসএস এর মাধ্যমে text-decoration-color এনিমেট হবে। </p>
<p><b>নোটঃ</b>text-decoration-color প্রোপার্টি সব ব্রাউজারে সাপোর্ট করে না। ফায়ারফক্স এ সাপোর্ট করানোর জন্য -moz-text-decoration-color প্রোপার্টি নির্ধারণ করতে হবে। সিএসএস এনিমেশন ইন্টারনেট এক্সপ্লোরার ৯ এ সাপোর্ট করে না।</p>
</body>
</html>
ফলাফল
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDiv {
background-color: lightgreen;
border: 1px solid teal;
-webkit-animation: mymove 5s infinite; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
animation: mymove 5s infinite;
}
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
50% {text-indent: 150px;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {text-indent: 150px;}
}
</style>
</head>
<body>
<p> text-indent ধীরে ধীরে 0px থেকে 150px এবং আবার 0px পরিবর্তন হবে।<p>
<div id="thisDiv">
চাঁদপুর হলো ইলিশের শহর। চাঁদপুর পদ্মা, মেঘনা ও ডাকাতিয়া এই তিনটি নদীর মিলনস্থল।চাঁদপুরে অসংখ্য শিক্ষা প্রতিষ্ঠান আছে।
চাঁদপুরে একটি স্টেডিয়াম আছে। চাঁদপুরে অনেক গুলো নির্দশণের মধ্যে রক্তধারা একটি। চাঁদপুরে একটি শিল্পকলা একাডেমি রয়েছে।
আর এই চাঁদপুরেই আমাদের স্যাট একাডেমির সূচনা। স্যাট একাডেমি সম্পূর্ণ ফ্রি আইটি শিক্ষা প্রতিষ্ঠান। চাঁদপুর হলো ইলিশের শহর।
চাঁদপুর পদ্মা, মেঘনা ও ডাকাতিয়া এই তিনটি নদীর মিলনস্থল।চাঁদপুরে অসংখ্য শিক্ষা প্রতিষ্ঠান আছে। চাঁদপুরে একটি স্টেডিয়াম আছে।
চাঁদপুরে অনেক গুলো নির্দশণের মধ্যে রক্তধারা একটি। চাঁদপুরে একটি শিল্পকলা একাডেমি রয়েছে।
আর এই চাঁদপুরেই আমাদের স্যাট একাডেমির সূচনা। স্যাট একাডেমি সম্পূর্ণ ফ্রি আইটি শিক্ষা প্রতিষ্ঠান।
</div>
<p> সিএসএস এ text-indent প্রোপার্টি এনিমেট হবেনা। </p>
<p><strong>নোটঃ</strong> ইন্টারনেট এক্সফ্লোরার ৯ এবং এর আগের ভার্সন গুলোতে সিএসএস এনিমেশন কাজ করেনা। </p>
</body>
</html>
ফলাফল
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDiv {
-webkit-animation: mymove 5s infinite; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
animation: mymove 5s infinite;
}
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
50% {text-shadow: 10px 20px 30px green;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {text-shadow: 10px 20px 30px green;}
}
</style>
</head>
<body>
<p>সিএসএস দিয়ে text-shadow প্রোপার্টি এনিমেট করা হলো। </p>
<p> text-shadow প্রোপার্টি ধীরে ধীরে পরিবর্তন হবেঃ<p>
<div id="thisDiv">
<h1> এটা হলো হিডার </h1>
<p> এটা হলো প্যারাগ্রাফ </p>
</div>
<p><strong>নোটঃ</strong> ইন্টারনেট এক্সফ্লোরার ৯ এবং এর আগের ভার্সন এ সিএসএস এনিমেট কাজ করবেনা।</p>
</body>
</html>
ফলাফল
