خانه / مقالات اموزشی / css / transition در css
آموزش CSS
آموزش CSS

transition در css

آموزش CSS (فصل یازدهم – جلسه دوم) : آشنایی با جلوه های ویژه ی CSS3

خاصیت transition

در این جلسه راجع به افکت ها و انیمیشن ها در css3 صحبت خواهیم کرد که با استفاده از css3 و البته بدون استفاده از جاوااسکریپت ، فلش یا جی کوئری ،چگونه بتوانیم افکتها و انیمشینهای حرکتی جالب را بر روی عناصر صفحه وبمان اعمال کنیم.
قاعده کلی یک افکت در css3 به این صورت است که ابتدا باید تعیین کنیم افکت قرار است چه تغییراتی ایجاد کند، و دوم اینکه در چه مدت زمانی ان تغییرات باید انجام شود. (مدت زمان اجرای افکت).
قاعده کلی به شکل زیر است

 

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

نکته : دقت کنید که اگر مدت زمان تعیین نشود، هیچ اتفاقی نخواهد افتاد زیرا مدت زمان پیشفرض ۰ ثانیه است. در ضمن باید از واحد های زیر برای تعیین مدت زمان استفاده کرد.
مثال : کد html
کد css
در مثال بالا تعیین کرده ایم که در صورتی که نشانگر موس بر روی تگ div قرار گرفت عرض آن در مدت ۲ثانیه به ۴۰۰px تغییر کند.
به یاد داشته باشید اگر بیش از یک property دارید که میخوایید افکت بر آن ها اعمال شود باید افکت ها را با استفاده از , از هم جدا کنید : مثال
البته زمانی از , برای جدا کردن property ها استفاده میشود که زمان اجرای آن ها متفاوت باشد ( مانند مثال بالا) و اگرهمه ی مقادیر آن propertyها شبیه به هم باشد به جا اوردن نام property از مقدار all استفاده می شود. : مثال
 

افکت های پیشرفته تر

در مثال های قبل فقط از دو مقدار استفاده کردیم با اینکه خصوصیت transition میتواند چهار مقدار بگیرد و قاعده کلی ان به شکل زیر است :

timing-function : افکت های از پیش تعیین شده توسط css3 برای تقسیم زمان، که یکی از مقادیر زیر را می پذیرد :

 

delay : مدت زمان تاخیر در اجرای افکت.

به مثال زیر دقت کنید :

 

مثال بالا تعیین می کند که افکت به مدت دوثانیه بر روی عرض المنت پس از ۱ثانیه تاخیر اجرا شود.

بسیار خب. در این جلسه با طریقه ایجاد یک افکت آشنا شدیم.
در جلسه بعد طریقه ایجاد انیمیشن در css3 آشنا خواهیم شد.

درباره آموزشگاه نوین آی تی

همچنین ببینید

آموزش برنامه نویسی جاوا

نحوه نام گذاری متغییر های جاوا

مطلب جدیدی که در این آموزش قرار است فرا بگیریم نحوه صحیح نامگذاری متغیر ها ...

دیدگاهتان را بنویسید

علی طاهری آموزشگاه طراحی سایت نوین آی تی 021-88283800 info(@)novin-it.net