সিএসএস(৩) transition-timing-function প্রোপার্টি
ব্রাউজার সাপোর্ট
| property | Google Chrome | Edge | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| transition-timing-function | ২৬.০ ৪.০ -webkit- |
১০.০ | ১৬.০ ৪.০ -moz- |
৬.১ ৩.১ -webkit- |
১২.১ ১০.5 -o- |
সংজ্ঞা ও ব্যবহার
transition-timing-function প্রোপার্টি ট্রানজিশন ইফেক্টের স্পিড কার্ভ নির্ধারন করে।
এই প্রোপার্টি ট্রানজিশন ইফেক্টে প্রদত্ত নির্দিষ্ট সময়ের স্পিডের পরিবর্তন কে বুঝায়।
| Initial Value: | Inherited: | Animatable: |
|---|---|---|
| normal | না | না। আরোও জানতে animatable অধ্যায় ভিজিট করুন। |
সিএসএস সিনট্যাক্স
transition-timing-function: linear/ease/ease-in/ease-out/ease-in-out/step-start/step-end/
steps(int,start/end)/cubic-bezier(n,n,n,n)/initial/inherit;
transition effect এ শুরু থেকে শেষ পর্যন্ত একই স্পিড থাকেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>css referance example</title>
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* সাফারি */
-webkit-transition-timing-function: linear; /* সাফারি */
transition: width 2s;
transition-timing-function: linear;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<p><b>নোটঃ</b> এই উদাহরণটি ইন্টারনেট এক্সপ্লোরার ৯ এবং পূর্ববর্তী ভার্সনে কাজ করে না। </p>
<div></div>
<p>ট্রানজিশন এফেক্ট দেখার জন্য div এলিমেন্টে মাউস কার্সর আনা নেয়া করুন। </p>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্ট সিনট্যাক্স
object.style.transitionTimingFunction="linear"উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>css referance example</title>
<style>
#myDIV {
border: 1px solid black;
background-color: lightblue;
width: 270px;
height: 200px;
overflow: auto;
-webkit-transition: all 2s; /* For Safari 3.1 to 6.0 */
transition: all 2s;
}
#myDIV:hover {
background-color: coral;
width: 570px;
height: 500px;
padding: 100px;
border-radius: 50px;
}
</style>
</head>
<body>
<p><b>DIV</b> এলিমেন্টের উপর মাউস নিয়ে আসলে ক্রমান্বয়ে এর কালার এবং আকার দুটোই পরিবর্তিত হবে! </p>
<p>"উদাহরণ দেখুন" বাটনে ক্লিক করি এবং পূনরায় DIV এলিমেন্টে মাউস নিয়ে আসি। পরিবর্তনটি লিনিয়ার কার্ভ স্পীডে ঘটবে। </p>
<button onclick="myFunction()">উদাহরণ দেখুন </button>
<div id="myDIV">
<h1>myDIV</h1>
</div>
<script>
function myFunction() {
document.getElementById("myDIV").style.WebkitTransitionTimingFunction = "linear"; // Code for Safari 3.1 to 6.0
document.getElementById("myDIV").style.transitionTimingFunction = "linear";
}
</script>
<p> transitionTimingFunction প্রোপার্টিটি ইন্টারনেট এক্সপ্লোরার ১০, ফায়ারফক্স, অপেরা এবং ক্রোমে সাপোর্ট করে। </p>
<p> সাফারিতে বিকল্প WebkitTransitionTimingFunction প্রোপার্টিটি সাপোর্ট করে। </p>
</body>
</html>
ফলাফল
transition-timing-function প্রোপার্টির ভ্যালু-সমূহ
- ease - এটি ডিফল্ট ভ্যালু।এর দ্বারা বুঝায় যে ট্রানজিশন ইফেক্টটি শুরু হবে ধীর গতিতে, তারপর দ্রুত ,তারপর আবার ধীর গতিতে চলবে (cubic-bezier (০.২৫,০.১,০.২৫,১) এর মত)।
- linear - ট্রানজিশন ইফেক্টটি শুরু থেকে শেষ পর্যন্ত একই গতি থাকবে। (cubic-bezier (০,০,১,১) এর মত)
- ease-in - ট্রানজিশন ইফেক্টটি ধীরগতিতে শুরু হবে। (cubic-bezier(০.৪২,০,১,১) এর মত)
- ease-out - ট্রানজিশন ইফেক্টটি ধীরগতিতে শেষ হবে। (cubic bezier(০,০,০.৫৮,১) এর মত)
- ease-in-out - ট্রানজিশন ইফেক্টটি ধীরগতিতে শুরু এবং ধীরগতিতে শেষ হবে। (cubic-bezier(০.৪২,০,০.৫৮,১) এর মত)
- step-start - ধাপের শুরুর সমান । (১,শুরু)
- step-end -ধাপের শুরুর সমান । (১, শেষ)
- steps(int,start/end) - দুই প্যারামিটার বিশিষ্ট stepping ফাংশনকে বুঝায়। প্রথম প্যারামিটারটি ফাংশনের বিরতির সংখ্যাকে নির্দেশ করে ।এটা অবশ্যই ধনাত্নক পূর্ন সংখ্যায় হতে হবে (যা ০ থেকে বড়) । দ্বিতীয় প্যারামিটার হলো অপশনাল যার ভ্যালু হবে "start" অথবা "end" এবং একটি বিন্দুকে নির্দেশ করে যেখানে একটি বিরতিতে মানের পরিবর্তন ঘটে। যদি দ্বিতীয় প্যারামিটারটি বাদ দেওয়া হয় তাহলে "end" ভ্যালুকে বুঝায়।
- cubic-bezier(n,n,n,n) - ভ্যালুগুলো cubic-bezier ফাংশনে দিতে হবে। সম্ভাব্য ভ্যালু নিউমেরিক ভ্যালুর ০ থেকে ১ পর্যন্ত হয়।
- initial - সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। আরও জানতে initial অধ্যায় ভিজিট করুন।
- inherit - এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়। আরও জানতে inherit অধ্যায় ভিজিট করুন।