সিএসএস Animatable এর উদাহরণ পেজ
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#main {
width: 350px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
}
#main div {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 40px;
}
#mygreenDiv {
animation: mymove 5s infinite;
-webkit-animation: mymove 5s infinite; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
}
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
50% {flex-basis: 200px;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {flex-basis: 200px;}
}
</style>
</head>
<body>
<p> "green DIV" flex-basis প্রোপার্টি টি 40px, থেকে 200px, পর্যন্ত ধীরে-ধীরে পরিবর্তন হয় এবং ফিরেআসে। :<p>
<div id="main">
<div style="background-color:coral;">yellow DIV</div>
<div style="background-color:lightgreen;" id="mygreenDiv">green DIV</div>
</div>
<p> flex প্রোপার্টি টি CSS এর মধ্যে <em> এনিমেটেবল</em> হয়।</p>
<p><b>বিঃদ্রঃ</b> CSS এনিমেশন ইন্টারনেট এক্সপ্লোরার ৯ এবং পূর্ববর্তী ভার্সনে কাজ করেনা।</p>
</body>
</html>
ফলাফল
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#main {
width: 350px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
}
#main div:nth-of-type(1) {flex-grow: 1;}
#main div:nth-of-type(2) {flex-grow: 1;}
#main div:nth-of-type(3) {flex-grow: 1;}
#mygreenDiv {
-webkit-animation: mymove 5s infinite; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
animation: mymove 5s infinite;
}
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
50% {flex-grow: 8;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {flex-grow: 8;}
}
</style>
</head>
<body>
<p>flex-grow প্রোপার্টি ধীরে-ধীরে ১ থেকে ৮ পর্যন্ত পরিবর্তিত হচ্ছে,আবার ১ এর কাছে ফিরে আসছে।<p>
<div id="main">
<div style="background-color:coral;"></div>
<div style="background-color:lightgreen;" id="mygreenDiv"></div>
<div style="background-color:khaki;"></div>
</div>
<p> flex-grow প্রোপার্টি CSS এর মধ্যে <em> এনিমেটেবল </em> হয় </p>
<p><b> বিঃদ্রঃ </b> CSS এনিমেশন প্রোপার্টি ইন্টারনেট এক্সপ্লোরার ৯ এবং পূর্ববর্তী ভার্সনে কাজ করেনা।</p>
</body>
</html>
ফলাফল
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#main {
width: 350px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
}
#main div {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 300px;
}
#mygreenDiv {
-webkit-animation: mymove 5s infinite; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
animation: mymove 5s infinite;
}
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
50% {flex-shrink: 8;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {flex-shrink: 8;}
}
</style>
</head>
<body>
<p> flex-shrink প্রোপার্টি টি ধীরে-ধীরে ১ থেকে ৮ পর্যন্ত পরিবর্তিত হয়ে আবার ১ এর কাছে ফিরে আসছে।<p>
<div id="main">
<div style="background-color:coral;"> হলুদ Div </div>
<div style="background-color:lightgreen;" id="mygreenDiv">নীল Div </div>
</div>
<p> flex-shrink প্রোপার্টিট CSS এর মধ্যে <em> এনিমেটেবল</em> হয় </p>
<p><b>বিঃদ্রঃ</b> CSS এনিমেশন ইন্টারনেট এক্সপ্লোরার ৯ এবং পূর্ববর্তী ভার্সনে কাজ করেনা।</p>
</body>
</html>
ফলাফল
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDiv {
border: 1px solid teal;
width: 400px;
height: 100px;
-webkit-animation: mymove 5s infinite; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
animation: mymove 5s infinite;
}
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
50% {font: 40px bold;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {font: 40px bold;}
}
</style>
</head>
<body>
<p> font প্রোপার্টিটি ধীরে ধীরে পরিবর্তন হবে:<p>
<div id="thisDiv">
<p> এটি একটি শিরোনাম।</p>
</div>
<p> সকল font প্রোপার্টির জন্য এই font প্রোপার্টিটি একটি শর্টহ্যান্ড প্রোপার্টি।</p>
<p>font-size, font-weight, font-stretch, এবং line-height CSS এর মধ্যে <em>এনিমেটেবল</em> হয়।</p>
<p><b>নোটঃ </b> CSS Animations ইন্টারনেট এক্সপ্লোরার ৯ এবং তার পূর্ববর্তী ভার্সনে সাপোর্ট করেনা।</p>
</body>
</html>
ফলাফল
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDiv {
border: 1px solid teal;
width: 400px;
height: 100px;
-webkit-animation: mymove 5s infinite; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
animation: mymove 5s infinite;
}
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
50% {font-size: 40px;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {font-size: 40px;}
}
</style>
</head>
<body>
<p>টেক্সট এর font-size ধীরে ধীরে পরিবর্তন হবেঃ <p>
<div id="thisDiv">
<p>এটি একটি শিরোনাম।</p>
</div>
<p>CSS এর font-size <em> এনিমেটেবল</em> হয়ে থাকে।</p>
<p><b>নোটঃ</b> ইন্টারনেট এক্সপ্লোরার ৯ এবং তার পূর্ববর্তী ভার্সনে CSS Animations সাপোর্ট করেনা।</p>
</body>
</html>
ফলাফল
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDiv {
border: 1px solid teal;
width: 400px;
height: 100px;
-webkit-animation: mymove 5s infinite; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
animation: mymove 5s infinite;
}
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
50% {font-weight: bold;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {font-weight: bold;}
}
</style>
</head>
<body>
<p> font-weight ধীরে-ধীরে normal থেকে bold এ পরিবর্তন হবেঃ<p>
<div id="thisDiv">
<p>এটি এটি অনুচ্ছেদ।</p>
</div>
<p>CSS এর মধ্যে font-weight <em> এনিমেটেবল </em> হয়ে থাকে। </p>
<p><b>নোটঃ</b> CSS Animations ইন্টারনেট এক্সপ্লোরার ৯ এবং তার পূর্ববর্তী ভার্সনে এ সার্পোট করেনা। </p>
</body>
</html>
ফলাফল
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDiv {
height: 100px;
background-color: coral;
color: white;
-webkit-animation: mymove 5s infinite; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
animation: mymove 5s infinite;
}
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
50% {height: 500px;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {height: 500px;}
}
</style>
</head>
<body>
<p>CSS এর মধ্যে হাইট প্রোপার্টি <em>animatable</em> করা যায়।</p>
<p> DIV এলিমেন্ট এর হাইট/ উচ্চতা ধীরে-ধীরে 100px থেকে 500px এ পরিবর্তিত হয় এবং 100px আবার ফিরে আসে।<p>
<div id="thisDiv">
<h1>My DIV</h1>
</div>
<p><b>বিঃদ্রঃ</b> CSS এনিমেশন ইন্টারনেট এক্সপ্লোরার ৯ এবং তার পূর্ববর্তী ভার্সনে সাপোর্ট করেনা।</p>
</body>
</html>
ফলাফল
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDiv {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background-color: coral;
color: white;
-webkit-animation: mymove 5s infinite; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
animation: mymove 5s infinite;
}
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
50% {left: 500px;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {left: 500px;}
}
</style>
</head>
<body>
<p>left প্রোপার্টি সিএসএস এর মধ্যে <em>animatable</em></p>
<p>DIV এলিমেন্টের বামের 0px থেকে আস্তে আস্তে 500px পর্যন্ত যায় আবার 0px এ ফিরে আসে।<p>
<div id="thisDiv">
<h1>SATT IT</h1>
</div>
<p><b>নোট:</b> সি এস এস এনিমেশন ইন্টারনেট এক্সপ্লোরার 9 এবং তার পূর্বের ভার্সনগুলোতে কাজ করে না।</p>
</body>
</html>
ফলাফল
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDiv {
letter-spacing: 2px;
-webkit-animation: mymove 5s infinite; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
animation: mymove 5s infinite;
}
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
50% {letter-spacing: 50px;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {letter-spacing: 50px;}
}
</style>
</head>
<body>
<p> letter-spacing প্রোপার্টি সিএসএস এর মধ্যে<em>animatable</em></p>
<p>letter-spacing প্রোপার্টি DIV এলিমেন্টের প্রতিটি অক্ষরের মাঝে 2px থেকে আস্তে আস্তে 50px নিয়ে আবার 2px এ ফিরিয়ে আনে।<p>
<div id="thisDiv">
অধিনায়ক হিসেবে বাংলাদেশের হয়ে সবচেয়ে বেশি ম্যাচ জেতার রেকর্ডটি এত দিন ছিল হাবিবুল বাশারের দখলে।
কাল আফগানিস্তানের বিপক্ষে পাওয়া রুদ্ধশ্বাস জয়ে সেটি নিজের করে নিয়েছেন মাশরাফি বিন মুর্তজা।
টেস্ট, ওয়ানডে ও টি-টোয়েন্টি মিলিয়ে এখন পর্যন্ত মোট ৫৩টি ম্যাচে বাংলাদেশ দলকে নেতৃত্ব দিয়েছেন মাশরাফি।
এর ৩১টিতেই জয় পেয়েছে বাংলাদেশ, হার ২১টিতে। টেস্ট ও ওয়ানডেতে হাবিবুলের নেতৃত্বে ৮৭ ম্যাচ খেলে বাংলাদেশের জয় ৩০টি ও হার ৫৩টি।
</div>
<p><b>নোট:</b>সিএসএস এনিমেশন প্রোপার্টি ইন্টারনেট এক্সপ্লোরার 9 এবং পূর্বের ভার্সনগুলোতে কাজ করে না।</p>
</body>
</html>
ফলাফল
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDiv {
line-height: 16px;
-webkit-animation: mymove 5s infinite; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
animation: mymove 5s infinite;
}
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
50% {line-height: 50px;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {line-height: 50px;}
}
</style>
</head>
<body>
<p> line-height প্রোপার্টি সিএসএস এর মধ্যে<em>animatable</em></p>
<p>line-height প্রোপার্টি DIV ইলিমেন্টের প্রতিটি অক্ষরের মাঝে 16px থেকে আস্তে আস্তে 50px নিয়ে আবার 16px এ ফিরিয়ে আনে।<p>
<div id="thisDiv">
অধিনায়ক হিসেবে বাংলাদেশের হয়ে সবচেয়ে বেশি ম্যাচ জেতার রেকর্ডটি এত দিন ছিল হাবিবুল বাশারের দখলে।
কাল আফগানিস্তানের বিপক্ষে পাওয়া রুদ্ধশ্বাস জয়ে সেটি নিজের করে নিয়েছেন মাশরাফি বিন মুর্তজা।
টেস্ট, ওয়ানডে ও টি-টোয়েন্টি মিলিয়ে এখন পর্যন্ত মোট ৫৩টি ম্যাচে বাংলাদেশ দলকে নেতৃত্ব দিয়েছেন মাশরাফি।
এর ৩১টিতেই জয় পেয়েছে বাংলাদেশ, হার ২১টিতে। টেস্ট ও ওয়ানডেতে হাবিবুলের নেতৃত্বে ৮৭ ম্যাচ খেলে বাংলাদেশের জয় ৩০টি ও হার ৫৩টি।
</div>
<p><b>নোট:</b>সিএসএস এনিমেশন ইন্টারনেট এক্সপ্লোরার 9 এবং পূর্বের ভার্সনগুলোতে কাজ করে না।</p>
</body>
</html>
ফলাফল
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDiv {
height: 200px;
background-color: lightgreen;
-webkit-animation: mymove 5s infinite; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
animation: mymove 5s infinite;
}
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
50% {margin: 50px;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {margin: 50px;}
}
</style>
</head>
<body>
<p>মার্জিন আস্তে আস্তে পরিবর্তন হয়ে 0px থেকে 50px পর্যন্ত যায় আবার 0px এ ফিরে আসে।<p>
<div id="thisDiv"> এটা আমাদের DIV ইলিমেন্ট</div>
<p>margin প্রোপার্টি সিএসএস এর মধ্যে <em>animatable</em></p>
<p><b>নোট:</b>সিএসএস এনিমেশন ইন্টারনেট এক্সপ্লোরার 9 এবং পূর্বের ভার্সনগুলোতে কাজ করে না। </p>
</body>
</html>
ফলাফল
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDiv {
height: 200px;
background-color: lightgreen;
border: 1px solid teal;
-webkit-animation: mymove 5s infinite; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
animation: mymove 5s infinite;
}
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
50% {margin-bottom: 50px;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {margin-bottom: 50px;}
}
</style>
</head>
<body>
<p>margin-bottom ধীরে ধীরে পরিবর্তিত হয়ে 0px থেকে 50px যায় এবং আবার 0px এ ফিরে আসে।<p>
<div id="thisDiv">এটা SATT IT ইলিমেন্ট</div>
<p>margin-bottom প্রোপার্টি সিএসএস এর মধ্যে <em>animatable</em></p>
<p><b>নোট:</b> সিএসএস এনিমেশন ইন্টারনেট এক্সপ্লোরার 9 এবং পূর্বের ভার্সনগুলো কাজ করে না।</p>
</body>
</html>
ফলাফল
