آموزش transition در CSS3

آموزش transition در CSS3

در این مطلب قصد داریم به بخش های پیچیده تر Transitions بپردازیم. از زنجیره ها و رویدادها تا شتاب سخت افزاری و توابع انیمیشن.به طراح وب اجازه می هد با بهره گیری از آن (خاصیت transition و جلوه هایی که به همراه آن استفاده می شود) مقادیر property را به تدریج و طی زمان یا مدت مشخص تغییر دهد (به عبارتی دیگر این قابلیت را به یک عنصر می دهد تا به صورت تدریجی از یک اندازه و شکل به یک اندازه و شکل دیگر تغییر وضعیت دهد) .

آموزش transition در CSS3 آموزش transition در CSS3 آموزش transition در CSS3 transition in css3

آموزش transition در CSS3


پشتیبانی مرورگرها

Transitions عملا در همه نسخه های Firefox, Safari و Chrome پشتیبانی میشود.و همچنین در IE10 و نسخه های بعد از آن.

مرورگرهای بر اساس Webkit که شامل Chrome و Safari میشوند از پیشوند -webkit- برای شناسایی این کدها استفاده میکنند. اما بزودی این خطا رفع میشود تا با استاندارد W3 یکسان شود.


استفاده از Transitions

راه ساده برای استفاده از Transitions استفاده از شبه کلاس ها مانند hover: است. که در آن باید نام خواص و مدت زمان اجرای انیمیشن و تابع انیمیشن تعیین شود.

قاعده دستوری transition

خاصیت transition خلاصه نویسی و بهینه نویسی خاصیت های زیر هست :

transition-property : با استفاده از این خاصیت میتونید تعیین کنید که انیمیشن روی کدوم خاصیت اختصاص داده شده به عنصر اعمال بشه ، مثلا روی width عنصر اعمال بشه یا روی height عنصر یا color عنصر و … . در صورتی که مقدار این خاصیت رو برابر با all قرار بدید تمامی خاصیت ها و مقادیر و استایل یک عنصر رو تحت تاثیر انیمیشن قرار میده و انیمیشن رو روی تمامی خاصیت ها و مقادیر عنصر اجرا می کنه .

transition-duration : این خاصیت مدت زمان اجرای یک انیمیشن رو مشخص می کنه که بر حسب ثانیه و میلی ثانیه مشخص میشه.

transition-timing-function : این خاصیت شامل مقادیر زیر میشه و سرعت اجرای افکت رو تعیین می کنه :

linear : انیمیشن از ابتدا تا انتها با سرعت یکسان حرکت می کنه و انجام میشه .

Ease : مقدار پیشفرض این خاصیت هست . انیمیشن با سرعت نسبتا کم شروع میشه و سریع سرعتش افزایش پیدا میکنه و وقتی به انتها میرسه دوباره سرعتش کم میشه .

ease-in : انیمیشن با سرعت کم شروع میشه و با سرعت زیاد به اتمام میرسه .

ease-out : انیمیشن با سرعت زیاد شروع میشه و با سرعت کم به اتمام میرسه.

ease-in-out : انیمیشن با سرعت کم شروع میشه بین انیمیشن یکم سرعت افزایش پیدا می کنه و با سرعت کم به اتمام میرسه .

cubic-bezier(n,n,n,n) : مقادیر دلخواهتون رو میتونید برای این خاصیت تعریف کنید . مقادیر امکانپذیر ۰ تا ۱ هست . میتونید برای تنظیم مقادیر از این سایت http://cubic-bezier.com استفاده کنید .

transition-delay : این خاصیت مکثی رو قبل از شروع افکت تعیین می کنه ، مثلا ۲ ثانیه میگذره و بعد افکت اجرا میشه.

محو کردن

چیز های محوی که با Hover کردن پدیدار میشن، معمولا توجه رو جلب میکنن.

این افکت دو مرحله داره؛ یکی مرحله اول که حالت پیشفرضشو مشخص میکنیم و دوم وقتی که روی اون هاور شد.

مثال زیر:

تغییر رنگ

متحرک سازی رنگ به طور باور نکردنی پیچیده هست و با محاسبات ریاضی درگیره؛ ابتدا باید ارزش رنگ به صورت RGB تعیین شه و سپس ترکیب دو رنگ با هم! درحالی که ما میتونیم با چند خط کد این تغییر رنگ رو به صورت انیمیشن اجرا کنیم.

بزرگ و کوچک کردن

یا اضافه کردن کد زیر به استایل صفحه خودتون و ست کردن div با کلاس “grow”، میتونید از افکت بزرگ شدن استفاده کنید.

افکت کوچک شدن هم مثل افکت بزرگ شدنه.

آونگ

یکی از افکت هایی که جدیدا بیشتر ازش استفاده میکنن، افکت حرکت آونگی هست. در سی اس اس با استفاده از فریم ها ( @keyframes ) میتونیم انیمیشن های پیچیده ای بسازیم و اجرای اون انیمیشن رو بینهایت کنیم.

در ابتدا انیمیشن رو تعریف میکنیم.(دقت داشته باشید برای اینکه این انیمیشن رو همه ی مرورگر ها پستیبانی کنن باید برای هر مرورگرها این انیمیشن رو تعریف کنید، منظورم اینه که دوباره این فریم رو با پیشوند مثلا -moz- تعریف کنید.)

و حالا استفاده از این انیمیشن.

مثال:

 

آموزش CSS آموزش طراحی وب

دیدگاه خود را بیان کنید