آموزش ویژگی animation-timing-function در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی animation-timing-function در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی animation-timing-function در CSS
با استفاده از ویژگی animation-timing-function
در CSS میتوان یک منحنی زمانی ( تایمینگ ) را برای اجرا انیمیشن تعریف و یا ایجاد کرد، که این منحنی میتواند با استفاده از تابع cubic-bezier و.. مشخص شود.
مثلا میتونیم مشخص کنیم که موقع شروع یا پایان انیمیشن سرعتش کم باشد، و یا با استفاده از تابع cubic-bezier میتوانیم یک منحنی سفارشی تعریف نماییم. ( مثال کمی پایین تر )
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی animation-timing-function
را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : استفاده از مقدار linear
1 2 3 4 5 6 7 8 |
div{ width: 100px; height: 100px; background: red; position: relative; animation: Free-Learn 5s infinite; animation-timing-function: linear; } |
مثال شماره ۲ : استفاده از مقدار / تابع cubic-bezier
1 2 3 4 5 6 7 8 |
div{ width: 100px; height: 100px; background: blue; position: relative; animation: Free-Learn 5s infinite; animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); } |
مثال شماره ۳ : استفاده از مقدار steps(int,start|end)
1 2 3 4 5 6 7 8 |
div{ width: 100px; height: 100px; background: blue; position: relative; animation: Free-Learn 5s infinite; animation-timing-function: steps(4,end); } |
Free-Learn
جدول مشخصات ویژگی animation-timing-function در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
مقدار پیش فرض | ease |
---|---|
قابل ارث بری | ندارد | اطلاعات بیشتر |
قابل متحرک سازی | ندارد | اطلاعات بیشتر |
نسخه | CSS3 |
نحوه استفاده در جاوااسکریپت | object.style.animationTimingFunction=”linear”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی animation-timing-function
در CSS پشتیبانی میکنند یا خیر.
» عددی که در کنار -webkit- و -moz- و -o- وجود دارد ، یعنی از آن نسخه به بالا باید از این پیشوندها استفاده نمایید. ( درباره پیشوندها بیشتر بخوانید )
نام ویژگی | Chrome | Firefox | Opera | Safari | IE |
animation-timing-function | ۴۳٫۰ ۴٫۰ -webkit- |
۱۶٫۰ ۵٫۰ -moz- |
۳۰٫۰ ۱۵٫۰ -webkit- ۱۲٫۰ -o- |
۹٫۰ ۴٫۰ -webkit- |
۱۰٫۰ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
1 |
animation-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; |
Free-Learn
جدول مقادیر ویژگی animation-timing-function در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
مقدار | توضیح |
---|---|
linear | انیمیشن از ابتدا تا انتها با یک سرعت مساوی (یکسان) حرکت میکند. |
ease | پیش فرض – انیمیشن آروم شروع می شود سپس تند و در نهایت آروم به پایان میرسد. |
ease-in | انیمیشن در شروع آروم میشود. |
ease-out | انیمیشن در پایان آروم میشود. |
ease-in-out | انیمیشن در شروع و پایان آروم میشود. |
step-start | اجرای انیمیشن را تکه تکه میکند. مثله : steps(3, start) |
step-end | اجرای انیمیشن را تکه تکه میکند. مثله : steps(3, end) |
steps(int,start|end) | مشخص میکند که اجرای انیمیشن در چند واحد (عدد صحیح) انجام شود. |
cubic-bezier(n,n,n,n) | استفاده از تابع / مکعب بزیر. ۴ مقدار میپذیرد و هرکدام از ۰ تا ۱ می باشد. |
initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
- مقدار steps(int,start|end) که در جدول مقادیر بالا می باشد، ۲ پارامتر می پذیرد، اولی int که باید یک عدد صحیح مثبت باشد برای تعداد واحدهایی که انیمیشن باید اجرا شود.
- و دومین پارامتر start یا end که استفاده از آن اختیاری می باشد، در واقع مشخص میکند که تکه تکه شدن انیمیشن از کدام نقطه شروع شود.
تابع یا منحنی cubic-bezier(n,n,n,n) چهار مقدار میپذیرد که هر کدام از این مقدارها باید عددی بین ۰ تا ۱ باشد، مثلا میتونیم ۰٫۴ وارد کنیم یا مثلا ۱٫۰ که میشه همون عدد ۱ .
برخی از مرورگرها در نسخه های قدیمی تر از این ویژگی پشتیبانی نمی کنند لذا باید برای حل این مشکل از یسری دستورات پیشوندی از نسخه مشخص شده آن مرورگر ( که در جدول پشتیبانی مرورگرها مشخص شده ) استفاده نمایید.
- -webkit- برای مرورگر کروم و سافاری و اُپرا
- -moz- برای مرورگر موزیلا فایرفاکس
- -o- برای مرورگر اُپرا