সিএসএস Animatable এর উদাহরণ পেজ
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDiv {
height: 200px;
background-color: lightgreen;
border: 1px solid teal;
animation: mymove 5s infinite;
-webkit-animation: mymove 5s infinite; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
}
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
50% {margin-left: 50px;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {margin-left: 50px;}
}
</style>
</head>
<body>
<p> margin-left প্রোপার্টি ধীরে ধীরে ০ থেকে ৫০ পিক্সেলে পরিবর্তন হচ্ছে এবং পুনরায় ০ পিক্সেলে ফিরে আসছেঃ<p>
<div id="thisDiv">এটি Div এলিমেন্ট </div>
<p> margin-left প্রোপার্টি CSS এর মাধ্যমে এনিমেটেড করা হয়েছে।</p>
<p><b>নোট:</b> CSS এনিমেশন ইন্টানেট এক্সপ্লোরার ৯ এবং আগের ভার্সনে সাপোর্ট করে না।</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-right: 50px;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {margin-right: 50px;}
}
</style>
</head>
<body>
<p> margin-right প্রোপার্টি ধীরে ধীরে ০ থেকে ৫০ পিক্সেলে পরিবর্তন হচ্ছে এবং পুনরায় ০ পিক্সেলে ফিরে আসছেঃ<p>
<div id="thisDiv">এটি Div এলিমেন্ট ।</div>
<p> margin-right প্রোপার্টি CSS এর মাধ্যমে এনিমেটেড করা হয়েছে।</p>
<p><b>নোট:</b> CSS এনিমেশন ইন্টানেট এক্সপ্লোরার ৯ এবং আগের ভার্সনে সাপোর্ট করে না।</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-top: 50px;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {margin-top: 50px;}
}
</style>
</head>
<body>
<p> margin-top প্রোপার্টি ধীরে ধীরে ০ থেকে ৫০ পিক্সেলে পরিবর্তন হচ্ছে এবং পুনরায় ০ পিক্সেলে ফিরে আসছেঃ<p>
<div id="thisDiv">স্যাট একাডেমী।</div>
<p> margin-top প্রোপার্টি CSS এর মাধ্যমে এনিমেটেবল করা হয়েছে।</p>
<p><b>নোট:</b> CSS এনিমেশন ইন্টারনেট এক্সপ্লোরার ৯ এবং তার আগের ভার্সনে সার্পোট করে না।</p>
</body>
</html>
ফলাফল
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDiv {
width: 500px;
background-color: lightgreen;
overflow: auto;
border: 1px solid teal;
-webkit-animation: mymove 5s infinite; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
animation: mymove 5s infinite;
}
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
50% {max-height: 100px;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {max-height: 100px;}
}
</style>
</head>
<body>
<p> max-height প্রোপার্টি ০ থেকে ১০০ পিক্সেলে পরিবর্তন হচ্ছে এবং পুনরায় ০ পিক্সেলে ফিরে আসছেঃ<p>
<div id="thisDiv">
<p> DIV এলিমেন্ট এর height পূর্ব নির্ধারিত ছিল না ।</p>
<p> এনিমেশন max-height ০ থেকে ১০০ পিক্সেল পর্যন্ত পরিবর্তন করতে পারে ।</p>
<p> DIV এলিমেন্ট এর height ১০০ পিক্সেল এর বেশি অতিক্রম করতে পারবে না। </p>
</div>
<p> max-height প্রোপার্টি CSS এর মাধ্যমে এনিমেটেবল করা হয়েছে।</p>
<p><b>নোটঃ</b> Chrome এবং Firefox এ max-height প্রোপার্টিটি ধীরে ধীরে পরিবর্তন হয় না।</p>
<p><b>নোটঃ</b> CSS এনিমেশন ইন্টারনেট এক্সপ্লোরার ৯ এবং তার আগের ভার্সনে সার্পোট করে না।</p>
</body>
</html>
ফলাফল
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDiv {
background-color: lightgreen;
overflow: auto;
border: 1px solid teal;
-webkit-animation: mymove 5s infinite; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
animation: mymove 5s infinite;
}
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
50% {max-width: 600px;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {max-width: 600px;}
}
</style>
</head>
<body>
<p>max-width প্রোপার্টি ০ থেকে ৬০০ পিক্সেলে পরিবর্তন হচ্ছে এবং পুনরায় ০ পিক্সেলে ফিরে আসছেঃ<p>
<div id="thisDiv">
<p> DIV এলিমেন্ট এর width পূর্ব নির্ধারিত ছিল না ।</p>
<p> ব্রাউজারের উইন্ডোর মাপ পরিবর্তন করে দেখার চেষ্টা করুন যে DIV এলিমেন্ট এর width এর মাপ কমালে/বাড়ালে বরাবর থাকে কিন্তু কখনই width ৬০০ পিক্সেলের বেশি হবে না।</p>
</div>
<p> max-width প্রোপার্টিকে CSS এর মাধ্যমে এনিমেটেবল করা হয়েছে।</p>
<p><b>নোট:</b> Chrome এবং Firefox এ max-height প্রোপার্টিটি ধীরে ধীরে পরিবর্তন হয় না।</p>
<p><b>নোট:</b> CSS এনিমেশন ইন্টারনেট এক্সপ্লোরার ৯ এবং তার আগের ভার্সনে সার্পোট করে না।</p>
</body>
</html>
ফলাফল
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDiv {
width: 500px;
background-color: lightgreen;
overflow: auto;
border: 1px solid teal;
-webkit-animation: mymove 5s infinite; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
animation: mymove 5s infinite;
}
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
50% {min-height: 400px;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {min-height: 400px;}
}
</style>
</head>
<body>
<p> min-height প্রোপার্টি "none" থেকে "400px" এ পরিবর্তন হচ্ছে এবং পুনরায় "none" এ ফিরে আসছেঃ <p>
<div id="thisDiv">
<p>এই DIV এলিমেন্টের pre-defined উচ্চতা নাই।</p>
<p> এই এনিমেশনের min-height, "none" থেকে "400px" পর্যন্ত পরিবর্তন হবে।</p>
</div>
<p> min-height প্রোপার্টিকে CSS এর মাধ্যমে <em>এনিমেটেবল </em> করা হয়েছে। </p>
<p><b>নোটঃ</b> CSS এনিমেশন ইন্টারনেট এক্সপ্লরার ৯ এবং তার আগের ভার্সনে সাপোর্ট করে না। </p>
</body>
</html>
ফলাফল
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDiv {
width: 50%;
background-color: lightgreen;
overflow: auto;
border: 1px solid teal;
-webkit-animation: mymove 5s infinite; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
animation: mymove 5s infinite;
}
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
50% {min-width: 800px;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {min-width: 800px;}
}
</style>
</head>
<body>
<p>min-width প্রোপার্টি "none" থেকে "400px" এ পরিবর্তন হচ্ছে এবং পুনরায় "none" এ ফিরে আসছেঃ<p>
<p><strong>নোটঃ</strong> min-width প্রোপার্টি width প্রোপার্টিকে বাতিল করে দেয় ।</p>
<div id="thisDiv">
<p>এই div এলিমেন্টের pre-defined width: 50% আছে।</p>
<p> এই এনিমেশনের min-width , "none" থেকে "800px" পর্যন্ত পরিবর্তন হবে ।</p>
</div>
<p> min-width প্রোপার্টিকে CSS এর মাধ্যমে <em>এনিমেটেবল </em> করা হয়েছে।</p>
<p><b>নোটঃ</b> CSS এনিমেশন ইন্টারনেট এক্সপ্লরার ৯ এবং তার আগের ভার্সনে সাপোর্ট করে না।</p>
</body>
</html>
ফলাফল
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDiv {
position: absolute;
top: 180px;
width: 300px;
height: 150px;
background-color: lightgreen;
border: 1px solid teal;
-webkit-animation: mymove 5s infinite; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
animation: mymove 5s infinite;
}
#thisDiv1 {
position: absolute;
top: 160px;
left: 30px;
width: 300px;
height: 150px;
background-color: coral;
border: 1px solid teal;
}
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
50% {opacity: 0;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {opacity: 0;}
}
</style>
</head>
<body>
<p> opacity প্রোপার্টি CSS এর মাধ্যমে এনিমেটেড করা হয়েছে।</p>
<p><b>নোট:</b> CSS এনিমেশন ইন্টারনেট এক্সপ্লোরার ৯ এবং আগের ভার্সনে সাপোর্ট করে না।</p>
<p> নীল div এর opacity প্রোপার্টি ১ থেকে ০ পিক্সেলে পরিবর্তন হচ্ছে এবং পুনরায় ১ পিক্সেলে ফিরে আসছেঃ<p>
<div id="thisDiv1">
<h1>স্যাট আইটি</h1>
</div>
<div id="thisDiv">
</body>
</html>
ফলাফল
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDiv {
margin: auto;
border: 1px solid black;
outline: coral solid 5px;
width: 300px;
height: 300px;
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
50% {outline-offset: 50px;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {outline-offset: 50px;}
}
</style>
</head>
<body>
<p> outline-offset প্রোপার্টিটি ০ থেকে ৫০ এবং পুনরায় ০ পিক্সেল হচ্ছেঃ<p>
<div id="thisDiv"></div>
<p>সিএসএসে outline-offset প্রোপার্টিকে <em> এনিমেট </em> করা যায়।</p>
<p><strong>বিঃদ্রঃ</strong> IE9 এবং এর পূর্বের ভার্সনে সিএসএস এনিমেশন কাজ করে না।</p>
</body>
</html>
ফলাফল
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDiv {
width: 300px;
height: 200px;
outline: 1px solid black;
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
50% {outline: 15px solid lightblue;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {outline: 15px solid lightblue;}
}
</style>
</head>
<body>
<p>আউটলাইন প্রোপার্টিটি ধীরে ধীরে পরিবর্তন হচ্ছে:<p>
<div id="thisDiv"></div>
<p> আউটলাইন প্রোপার্টি একটি শর্টহ্যান্ড প্রোপার্টি সকল আউটলাইন প্রোপার্টিটির জন্য ।</p>
<p>আউটলাইন প্রোপার্টির পৃথক <em>অ্যানিটেবল</em> দেক</p>
<p><strong>নোটঃ</strong> ইন্টারনেট এক্সপ্লরার ৯ এবং পূর্বের ভার্সন গুলোতে সিএসএস অ্যানিমেশন কাজ করে না। </p>
</body>
</html>
ফলাফল
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDiv {
width: 300px;
height: 200px;
outline: 15px solid yellow;
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation: mymove 5s infinite
}
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
50% {outline-color: blue;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {outline-color: blue;}
}
</style>
</head>
<body>
<p>ধীরে ধীরে আউট লাইন কালার প্রোপার্টিটি হলুদ থেকে নীল আবার নীল থেকে হলুদ কালারে পরিবর্তন হচ্ছেঃ<p>
<div id="thisDiv"></div><br><br>
<p><strong>নোটঃ</strong> IE9 এবং পূর্বের ভার্সনগুলোতে সিএসএস অ্যানিমেশন কাজ করে না।</p>
</body>
</html>
ফলাফল
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-offset: 50px;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {outline-offset: 50px;}
}
</style>
</head>
<body>
<p>outline-offset প্রোপার্টি ধীরে ধীরে ০ থেকে ৫০ পিক্সেলে পরিবর্তন হচ্ছে এবং পুনরায় ০ পিক্সেলে ফিরে আসছেঃ<p>
<div id="thisDiv"></div>
<p> outline-offset প্রোপার্টি CSS এর মাধ্যমে এনিমেটেড করা হয়েছে।</p>
<p><b>নোট:</b> CSS এনিমেশন ইন্টানেট এক্সপ্লোরার ৯ এবং আগের ভার্সনে সাপোর্ট করে না।</p>
</body>
</html>
ফলাফল
