صفت animation-timing-function در css
در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد صفت animation-timing-function در css توضیحاتی را ارائه نماییم. ویژگی کاربردی animation-timing-function در زبان css به تازگی در آخرین نسخه این زبان طراحی یعنی CSS3 معرفی شده است.
معرفی و کاربرد صفت animation-timing-function در css
مقادیر صفت جدید animation-timing-function در زبان طراحی سی اس اس
صفت جدید animation-timing-function که در زبان طراحی CSS3 معرفی شده است، 11 مقدار می پذیرد که عبارتند از:
- مقدار linear
- مقدار ease
- مقدار ease-in
- مقدار ease-out
- مقدار ease-in-out
- مقدار step-start
- مقدار step-end
- مقدار steps
- مقدار cubic-bezier
- مقدار initial
- مقدار inherit
مقدار linear درون صفت animation-timing-function در css
اگر خاصیت animation-timing-function را برابر با یک مقدار linear قرار دهیم، این خصوصیت می تواند یک یا چند نام را در انیمیشن هایی که با دستور keyframe@ ساخته شده اند، برای یک تگ html مهیا کند.
مقدار ease درون خاصیت animation-timing-function در زبان css
اگر خاصیت animation-timing-function را برابر با یک مقدار ease قرار دهیم، می توانیم برای یک تگ html ، مدت زمان چرخه یک انیمیشن را مشخص نماییم.
مقدار ease-in درون صفت animation-timing-function در css
اگر خاصیت animation-timing-function را برابر با یک مقدار ease-in قرار دهیم، انیمیشن ابتدا در جهت پیش فرض رو به جلو ( forwards ) و سپس در جهت رو به عقب یا معکوس ( backwards ) روی تگ html اجرا می گردد.
مقدار ease-out درون صفت animation-timing-function در css
اگر خاصیت animation-timing-function را برابر با یک مقدار ease-out قرار دهیم، می توانم برای یک تگ html ، اجرای انیمیشن را به تاخیر بیندازیم.
مقدار ease-in-out درون خاصیت animation-timing-function در زبان css
اگر خاصیت animation-timing-function را برابر با یک مقدار ease-in-out قرار دهیم، می توانیم تعداد دفعات تکرار شدن انیمیشن درون یک تگ html مشخص کنیم.
مقدار step-start درون خاصیت animation-timing-function در زبان سی اس اس
اگر خاصیت animation-timing-function را برابر با یک مقدار step-start قرار دهیم، می توانیم جهت گیری انیمیشن را درون یک تگ html تعیین کنیم، که آیا انیمیشن باید به جلو ، عقب و یا در چرخه های متناوب پخش شود.
مقدار step-end درون صفت animation-timing-function در css
اگر خاصیت animation-timing-function را برابر با یک مقدار step-end قرار دهیم، می توانیم قبل از شروع اجرای انیمیشن یا پس از پایان اجرای انیمیشن درون تگ html مورد نظر ، یک سبک یا استایل ایجاد کنیم.
مقدار steps درون خاصیت animation-timing-function در زبان سی اس اس
اگر خاصیت animation-timing-function را برابر با یک مقدار steps قرار دهیم، می توانیم برای یک تگ html ، چرخه یک انیمیشن را متوقف کنیم یا به حرکت در آوریم.
مقدار cubic-bezier درون خاصیت animation-timing-function در زبان css
اگر خاصیت animation-timing-function را برابر با یک مقدار cubic-bezier قرار دهیم، می توانیم برای یک تگ html ، چرخه یک انیمیشن را متوقف کنیم یا به حرکت در آوریم.
مقدار initial درون خاصیت animation-timing-function در زبان سی اس اس
اگر خاصیت animation-timing-function را برابر با مقدار initial تعریف کنیم، در حقیقت مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.
مقدار inherit درون صفت animation-timing-function در css
اگر خاصیت animation-timing-function را برابر با مقدار inherit تعریف کنیم، در واقع تگ html مربوطه خصوصیات انیمیشن را از والد پدری خود به ارث می برد.
مثال در مورد خاصیت animation-timing-function در زبان طراحی سی اس اس
div {animation-timing-function: linear;}
بررسی خاصیت animation-timing-function از نظر نسخه زبان طراحی سی اس اس
ویژگی کاربردی animation-timing-function در زبان css به تازگی و در آخرین نسخه این زبان طراحی یعنی css3 معرفی شده است.
برای متخصص شدن در طراحی سایت فروشگاهی با وردپرس روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای طراحی سایت فروشگاهی با وردپرس پروژه محور
برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای آموزش طراحی سایت با HTML5 و CSS3 و Bootstrap و jQuery
بررسی ساختاری خصوصیت animation-timing-function
عناوین ساختاری خاصیت animation-timing-function | وضعیت ساختاری خاصیت animation-timing-function |
مقدار پیش فرض | ease |
قابلیت توارث | ندارد |
قابلیت تحرک | ندارد |
ورژن css صفت | CSS3 |
سینتکس صفت در جاوا اسکریپت | "object.style.animationTimingFunction="linear |
پشتیبانی مرورگرهای اینترنتی از خاصیت animation-timing-function در زبان طراحی سی اس اس
خاصیت css | |||||
animation | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
پیوندهای مهم و کاربردی
تگ های جدید HTML5 در سایت آموزی
صفات تگ های HTML در سایت آموزی
تگ های منسوخ شده HTML5 در سایت آموزی
تگ های block level و inline level در سایت آموزی
صفت animation-timing-function در css سرعت انیمیشن – اختصاصی سایت آموزی
درباره سایت آموزی
علیرضا ابراهیمی - بنیانگذار وبسایت آموزشی سایت آموزی ، 8 سال سابقه فعالیت حرفه ای در زمینه طراحی سایت ، سئو ، سابقه تدریس اغلب زبان های برنامه نویسی تحت وب ، محقق و تحلیلگر ساختارهای توسعه دهنده وب
نوشته های بیشتر از سایت آموزی
دیدگاهتان را بنویسید