صفت transition-timing-function در css سرعت افکت تغییر

در این مقاله از سایت آموزی در مجموعه آموزش های صفات سی اس اس به بررسی و تحلیل خاصیت transition-timing-function در زبان CSS می پردازیم.

ویژگی کاربردی transition-timing-function در سومین نسخه این زبان طراحی یعنی css3 معرفی شده است.

صفت transition-timing-function در css سرعت افکت تغییر

معرفی و کاربرد ویژگی transition-timing-function در زبان طراحی css

به کمک خاصیت white-space در CSS3 می توانیم سرعت افکت تغییر یا سرعت ترانزیشن را در تگ html که برایش ترانزیشن تعیین نمودیم، تغییر دهیم.

transition-timing-function می توانیم چندین سرعت مختلف برای روند افکت تغییر اختصاص دهیم. مثلا یک ترانزیشن بر روی تگ html ممکن است با سرعت متوسطی شروع شود و با سرعت زیادی ادامه یابد و با سرعت آرامی پایان یابد.

مقادیر صفت کاربردی transition-timing-function در زبان طراحی css

صفت transition-timing-function که در زبان طراحی CSS3 معرفی شده است، 11 مقدار می پذیرد که عبارتند از:

  1. مقدار ease
  2. مقدار linear
  3. مقدار ease-in
  4. مقدار ease-out
  5. مقدار ease-in-out
  6. مقدار step-start
  7. مقدار step-end
  8. مقدار ( steps ( int,start|end
  9. مقدار ( cubic-bezier ( n,n,n,n
  10. مقدار initial
  11. مقدار inherit

مقدار ease درون خاصیت transition-timing-function در زبان سی اس اس

اگر خاصیت transition-timing-function را برای یک عنصر html برابر با مقدار ease قرار دهیم، یعنی ease معادل تابع ( cubic-bezier ( 0.25, 0.1, 0.25, 1 می باشد.

مقدار ease به عنوان مقدار پیش فرض خصوصیت transition-timing-function محسوب می شود.

صفت transition-timing-function در css سرعت افکت تغییر

مقدار linear درون خاصیت transition-timing-function در زبان css

اگر خاصیت transition-timing-function را برای یک عنصر html برابر با مقدار linear قرار دهیم، یعنی linear معادل تابع ( cubic-bezier ( 0, 0, 1, 1 می باشد. استفاده از این تابع باعث می شود که سرعت  از اول تا آخر حرکت ثابت باشد.

مقدار ease-in درون خاصیت transition-timing-function در زبان سی اس اس

اگر خاصیت transition-timing-function را برای یک عنصر html برابر با مقدار ease-in قرار دهیم، یعنی ease-in معادل تابع ( cubic-bezier ( 0.42, 0, 1, 1 می باشد. استفاده از این تابع باعث می شود که حرکت با سرعت آرامی شروع شود و کم کم شتاب بگیرد و به یک سرعت ثابت برسد تا پایان یابد.

مقدار ease-out درون خاصیت transition-timing-function در زبان سی اس اس

اگر خاصیت transition-timing-function را برای یک عنصر html برابر با مقدار ease-out قرار دهیم، یعنی ease-in معادل تابع ( cubic-bezier ( 0, 0, 0.58, 1 می باشد. استفاده از این تابع باعث می شود که حرکت با سرعت بالا شروع شود و بتدریج شتاب کم شود، تا به یک سرعت ثابت برسد تا پایان یابد.

مقدار ease-in-out درون خاصیت transition-timing-function در زبان css

اگر خاصیت transition-timing-function را برای یک عنصر html برابر با مقدار ease-in-out قرار دهیم، یعنی ease-in-out معادل تابع ( cubic-bezier ( 0.42, 0, 0.58, 1 می باشد. این تابع ترکیب ease-in و ease-out می باشد به این معنا که حرکت با یک سرعت کم شروع می شود در وسط کار شتاب می گیرد و بتریج سرعتش کم می شود و با یک سرعت ثابت به پایان می رسد.

مقدار step-start درون خاصیت transition-timing-function در زبان سی اس اس

اگر خاصیت transition-timing-function را برای یک عنصر html برابر با مقدار step-start قرار دهیم، یعنی step-start معادل تابع ( steps ( 1, start می باشد. این تابع باعث می شود تا ترانزیشن یا انیمیشن ناگهان به حالت آخر پرش داشته باشد و تا آخر زمان انیمیشن یا ترنزیشن در همان حالت بماند.

مقدار step-end درون خاصیت transition-timing-function در زبان css

اگر خاصیت transition-timing-function را برای یک عنصر html برابر با مقدار step-end قرار دهیم، یعنی step-end معادل تابع ( steps ( 1, start می باشد. این تابع باعث می شود تا زمان ترانزیشن یا انیمیشن به پایان برسد. و تا آخر زمان انیمیشن یا ترنزیشن به حالت آخر پرش می کند.

مقدار ( steps ( int,start|end درون خاصیت transition-timing-function در زبان سی اس اس

اگر خاصیت transition-timing-function را برای یک عنصر html برابر با مقدار ( steps ( int,start|end قرار دهیم، یعنی می خواهیم تقسیم زمان ترنزیشن به فاصله های زمانی برابر برسد. این تابع دو مقدار start و end را می پذیرد. که یک فاصله زمانی برای ترانزیشن در اول یا آخر آن رخ دهد.

مقدار ( cubic-bezier ( n,n,n,n درون خاصیت transition-timing-function در زبان css

اگر خاصیت transition-timing-function را برای یک عنصر html برابر با مقدار ( cubic-bezier ( n,n,n,n قرار دهیم، یعنی می خواهیم timing function یا سرعت زمانی مخصوص به خود را بسازیم و افکت هایی مثل افکت ورجه ورجه کردن (bouncing) را بوجود بیاوریم.

مقدار initial درون خاصیت transition-timing-function در زبان css

اگر خاصیت transition-timing-function را برابر با مقدار initial تعریف کنیم، در حقیقت مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.

مقدار inherit درون خاصیت transition-timing-function در زبان سی اس اس

اگر خاصیت transition-timing-function را برابر با مقدار inherit تعریف کنیم، در واقع تگ html مربوطه خصوصیت مورد نظر را از والد پدری خود به ارث می برد.

صفت transition-timing-function در css سرعت افکت تغییر

بررسی خاصیت transition-timing-function از نظر نسخه زبان طراحی css

ویژگی کاربردی transition-timing-function در سومین نسخه این زبان طراحی یعنی css3 معرفی شده است.

بررسی ساختاری خصوصیت transition-timing-function در زبان طراحی سی اس اس