صفت transition-timing-function در css
صفت transition-timing-function در css سرعت افکت تغییر
در این مقاله از سایت آموزی در مجموعه آموزش های صفات سی اس اس به بررسی و تحلیل خاصیت transition-timing-function در زبان CSS می پردازیم.
ویژگی کاربردی transition-timing-function در سومین نسخه این زبان طراحی یعنی css3 معرفی شده است.
معرفی و کاربرد ویژگی transition-timing-function در زبان طراحی css
به کمک خاصیت white-space در CSS3 می توانیم سرعت افکت تغییر یا سرعت ترانزیشن را در تگ html که برایش ترانزیشن تعیین نمودیم، تغییر دهیم.
transition-timing-function می توانیم چندین سرعت مختلف برای روند افکت تغییر اختصاص دهیم. مثلا یک ترانزیشن بر روی تگ html ممکن است با سرعت متوسطی شروع شود و با سرعت زیادی ادامه یابد و با سرعت آرامی پایان یابد.
مقادیر صفت کاربردی transition-timing-function در زبان طراحی css
صفت transition-timing-function که در زبان طراحی CSS3 معرفی شده است، 11 مقدار می پذیرد که عبارتند از:
- مقدار ease
- مقدار linear
- مقدار ease-in
- مقدار ease-out
- مقدار ease-in-out
- مقدار step-start
- مقدار step-end
- مقدار ( steps ( int,start|end
- مقدار ( cubic-bezier ( n,n,n,n
- مقدار initial
- مقدار inherit
مقدار ease درون خاصیت transition-timing-function در زبان سی اس اس
اگر خاصیت transition-timing-function را برای یک عنصر html برابر با مقدار ease قرار دهیم، یعنی ease معادل تابع ( cubic-bezier ( 0.25, 0.1, 0.25, 1 می باشد.
مقدار ease به عنوان مقدار پیش فرض خصوصیت transition-timing-function محسوب می شود.
[html] h3 {transition-timing-function: ease;} [/html]
صفت transition-timing-function در css سرعت افکت تغییر
مقدار linear درون خاصیت transition-timing-function در زبان css
اگر خاصیت transition-timing-function را برای یک عنصر html برابر با مقدار linear قرار دهیم، یعنی linear معادل تابع ( cubic-bezier ( 0, 0, 1, 1 می باشد. استفاده از این تابع باعث می شود که سرعت از اول تا آخر حرکت ثابت باشد.
[html] h3 {transition-timing-function: linear;} [/html]
مقدار ease-in درون خاصیت transition-timing-function در زبان سی اس اس
اگر خاصیت transition-timing-function را برای یک عنصر html برابر با مقدار ease-in قرار دهیم، یعنی ease-in معادل تابع ( cubic-bezier ( 0.42, 0, 1, 1 می باشد. استفاده از این تابع باعث می شود که حرکت با سرعت آرامی شروع شود و کم کم شتاب بگیرد و به یک سرعت ثابت برسد تا پایان یابد.
[html] h3 {transition-timing-function: ease-in;} [/html]
مقدار ease-out درون خاصیت transition-timing-function در زبان سی اس اس
اگر خاصیت transition-timing-function را برای یک عنصر html برابر با مقدار ease-out قرار دهیم، یعنی ease-in معادل تابع ( cubic-bezier ( 0, 0, 0.58, 1 می باشد. استفاده از این تابع باعث می شود که حرکت با سرعت بالا شروع شود و بتدریج شتاب کم شود، تا به یک سرعت ثابت برسد تا پایان یابد.
[html] h3 {transition-timing-function: ease-out;} [/html]
مقدار 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 می باشد به این معنا که حرکت با یک سرعت کم شروع می شود در وسط کار شتاب می گیرد و بتریج سرعتش کم می شود و با یک سرعت ثابت به پایان می رسد.
[html] h3 {transition-timing-function: ease-in-out;} [/html]
مقدار step-start درون خاصیت transition-timing-function در زبان سی اس اس
اگر خاصیت transition-timing-function را برای یک عنصر html برابر با مقدار step-start قرار دهیم، یعنی step-start معادل تابع ( steps ( 1, start می باشد. این تابع باعث می شود تا ترانزیشن یا انیمیشن ناگهان به حالت آخر پرش داشته باشد و تا آخر زمان انیمیشن یا ترنزیشن در همان حالت بماند.
[html] h3 {transition-timing-function: step-start;} [/html]
مقدار step-end درون خاصیت transition-timing-function در زبان css
اگر خاصیت transition-timing-function را برای یک عنصر html برابر با مقدار step-end قرار دهیم، یعنی step-end معادل تابع ( steps ( 1, start می باشد. این تابع باعث می شود تا زمان ترانزیشن یا انیمیشن به پایان برسد. و تا آخر زمان انیمیشن یا ترنزیشن به حالت آخر پرش می کند.
[html] h3 {transition-timing-function: step-end;} [/html]
مقدار ( steps ( int,start|end درون خاصیت transition-timing-function در زبان سی اس اس
اگر خاصیت transition-timing-function را برای یک عنصر html برابر با مقدار ( steps ( int,start|end قرار دهیم، یعنی می خواهیم تقسیم زمان ترنزیشن به فاصله های زمانی برابر برسد. این تابع دو مقدار start و end را می پذیرد. که یک فاصله زمانی برای ترانزیشن در اول یا آخر آن رخ دهد.
[html] h3 {transition-timing-function: ;} [/html]
مقدار ( cubic-bezier ( n,n,n,n درون خاصیت transition-timing-function در زبان css
اگر خاصیت transition-timing-function را برای یک عنصر html برابر با مقدار ( cubic-bezier ( n,n,n,n قرار دهیم، یعنی می خواهیم timing function یا سرعت زمانی مخصوص به خود را بسازیم و افکت هایی مثل افکت ورجه ورجه کردن (bouncing) را بوجود بیاوریم.
[html] h3 {transition-timing-function: ;} [/html]
مقدار 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 در سومین نسخه این زبان طراحی یعنی css3 معرفی شده است.
بررسی ساختاری خصوصیت transition-timing-function در زبان طراحی سی اس اس
عناوین ساختاری خاصیت transition-timing-function | وضعیت ساختاری خاصیت transition-timing-function |
مقدار پیش فرض | ease |
قابلیت توارث | ندارد |
قابلیت تحرک | ندارد |
ورژن css صفت | CSS3 |
سینتکس صفت در جاوا اسکریپت | "object.style.transitionTimingFunction="linear |
پشتیبانی مرورگرهای اینترنتی از خاصیت transition-timing-function در زبان طراحی css
خاصیت css | |||||
transition-timing-function | 26.0 به بالا و 4.0 تا 26.0 با -webkit- | 10.0 | 16.0 به بالا و 4.0 تا 16.0 با -moz- | 6.1 به بالا و 3.1 تا 6.1 با -webkit- | 12.1 به بالا و 10.5 تا 12.1 با -o- |
پیوندهای مهم و کاربردی
تگ های جدید HTML5 در سایت آموزی
صفات تگ های HTML در سایت آموزی
تگ های منسوخ شده HTML5 در سایت آموزی
صفت transition-timing-function در css سرعت افکت تغییر – اختصاصی سایت آموزی
درباره سایت آموزی
علیرضا ابراهیمی - بنیانگذار وبسایت آموزشی سایت آموزی ، 8 سال سابقه فعالیت حرفه ای در زمینه طراحی سایت ، سئو ، سابقه تدریس اغلب زبان های برنامه نویسی تحت وب ، محقق و تحلیلگر ساختارهای توسعه دهنده وب
نوشته های بیشتر از سایت آموزی
دیدگاهتان را بنویسید