آموزش ترانزیشن در css

[shima256]

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

1 ​	transition: property duration;

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

نکته : دقت کنید که اگر مدت زمان تعیین نشود، هیچ اتفاقی نخواهد افتاد زیرا مدت زمان پیشفرض 0 ثانیه است. در ضمن باید از واحد های زیر برای تعیین مدت زمان استفاده کرد.

1 2 3

s = ثانیه ms = میلی ثانیه 1000ms = 1s

مثال : کد html

1	<div class="box"> Hover Me! </div>

کد css

div.box { height: 100px; width: 200px; background-color: #09f; text-align: center; transition: width 2s; -moz-transition: width 2s; -webkit-transition: width 2s; -o-transition: width 2s; } div.box:hover { width: 400px; }

در مثال بالا تعیین کرده ایم که در صورتی که نشانگر موس بر روی تگ div قرار گرفت عرض آن در مدت 2ثانیه به 400px تغییر کند.
به یاد داشته باشید اگر بیش از یک property دارید که میخوایید افکت بر آن ها اعمال شود باید افکت ها را با استفاده از , از هم جدا کنید : مثال

1 2 3 4

transition: width 2s , height 1s; -moz-transition: width 2s , height 1s; -webkit-transition: width 2s , height 1s; -o-transition: width 2s , height 1s;

البته زمانی از , برای جدا کردن property ها استفاده میشود که زمان اجرای آن ها متفاوت باشد ( مانند مثال بالا) و اگرهمه ی مقادیر آن propertyها شبیه به هم باشد به جا اوردن نام property از مقدار all استفاده می شود. : مثال

1	transition: all 1.5s

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


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

1	transition : property duration timing-function delay;

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

1	ease , ease-in , ease-out , ease-in-out , linear

delay : مدت زمان تاخیر در اجرای افکت.
به مثال زیر دقت کنید :

1 2 3 4

transition: width 2s linear 1s; -moz-transition: width 2s linear 1s; -webkit-transition: width 2s linear 1s; -o-transition: width 2s linear 1s;

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