ویژگی transition-timing-function در CSS نقش مهمی در تعیین نحوه تغییرات اثرات انیمیشنی در طول زمان دارد. این ویژگی به شما امکان می‌دهد تا سرعت تغییرات بین دو حالت را با استفاده از تابعی خاص مشخص کنید.
به عبارت ساده‌تر، اگر شما می‌خواهید یک عنصر را با یک transitioning از حالت اولیه به حالت دیگر منتقل کنید، استفاده از این ویژگی کمک می‌کند که نحوه این انتقال را کنترل کنید؛ مثلاً اینکه در ابتدا سریع و سپس آهسته یا برعکس تغییر کند.
تابع‌های مختلفی برای این ویژگی وجود دارد که هرکدام یک شکل منحنی خاص برای تغییرات سرعت دارند. تابع ease که به صورت پیش‌فرض استفاده می‌شود، یک نوع تغییر منحنی استاندارد است که آرام شروع و پایان می‌یابد، اما در وسط کمی شتاب می‌گیرد.
تابع‌های دیگری نیز مانند linear، ease-in، ease-out و ease-in-out وجود دارند که هر یک رفتار متفاوتی در تغییر سرعت دارند. برای مثال، تابع linear کنترل کامل و یکنواختی در طول زمان دارد.
همچنین شما می‌توانید از توابع cubic-bezier برای پیاده‌سازی رفتارهای سفارشی استفاده کنید. این تابع به شما چهار پارامتر می‌دهد تا منحنی تغییرات خودتان را مشخص کنید و در نتیجه تقریبا هر رفتاری که تصور کنید به واقعیت تبدیل می‌شود.
در ادامه، یک نمونه کد و توضیحات آن ارائه می‌گردد تا بیشتر با نحوه استفاده از این ویژگی آشنا شوید.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>مثال transition-timing-function</title>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
transition: all 2s ease-in-out;
}
div:hover {
width: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
توضیح کد:
کد <!DOCTYPE html>: نوع سند HTML را مشخص می‌کند.
کد <html lang="fa">: زبان سند HTML را به فارسی تنظیم می‌کند.
کد <meta charset="UTF-8">: کدگذاری کاراکترهای صفحه را مشخص می‌کند.
کد <meta name="viewport" content="width=device-width, initial-scale=1.0">: جهت هماهنگی با دستگاه‌های مختلف و تعیین مقیاس صفحه استفاده می‌شود.
کد <title>مثال transition-timing-function</title>: عنوان صفحه را به "مثال transition-timing-function" تنظیم می‌کند.
کد div: یک مربع ساده تعریف می‌کند که به رنگ قرمز با اندازه 100 در 100 پیکسل است.
کد transition: all 2s ease-in-out;: تعیین می‌کند همه تغییرات در این عنصر در طول 2 ثانیه و با تابع ease-in-out انجام شود.
کد div:hover: تعریف تغییرات در حالت هاور (لغو کردن حالت عادی و اعمال تغییرات). سایز را دو برابر و رنگ را به آبی تغییر می‌دهد.