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

دسته بندی: آموزش
زمان مطالعه: 3 دقیقه
۲۰ اردیبهشت ۱۳۹۲

خاصیت transition

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

transition: property duration;

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

نکته :

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

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

مثال : کد html

<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 دارید که میخوایید افکت بر آن‌ها اعمال شود باید افکت‌ها را با استفاده از , از هم جدا کنید : مثال

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 استفاده می‌شود. : مثال

transition: all 1.5s

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

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

transition : property duration timing-function delay;

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

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

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

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

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

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

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

چه امتیازی به این مقاله می دید؟
نویسنده طاها دریس

جلسات دوره

نظرات کاربران

elahe

با سلام، ضمن تشکر از وبسایت خوبتون،
من میخوام با کلیک روی دکمه next تصویرم عوض بشه و چند ثانیه طول بکشه، اما هر ترانزیشنی که دادم نشد، ممنون میشم اگه راهنمایی بفرمایید.

کیوان علی محمدی

بهتره از افکت های جی کوئری استفاده کنید.

elahe

من زیاد به jquery وارد نیستم، اگه لطف کنین بیشتر توضیح بدین ممنون میشم.

elahe

متاسفانه با جی کوئری زیاد کار نکردم، اگه لطف کنین راهنمایی کنین ممنون میشم.

hamed_z2001

سلام .برای من کد transition کار نمی کنه ……
لطفا این کد ساده ای که قرار میدم رو نگاه کنید و اشکالمو لطفا بگید …
html:

&lt;table class=&quot;navy&quot; border=&quot;1&quot; &gt;
&lt;tr&gt;
&lt;td&gt; 7learn  &lt;/td&gt;
&lt;/tr&gt;
&lt;/table

و کد css:

table.NAVY{
 height:200;width:200;
background-color:red;
-moz-transition: width 2s;
}
table.navy : hover{ 
width:400
}

الان میخوام وقتی که موس روی جدول رفت تغییر عرض بده ولی اینکار انجام نمیشه!! 🙁 نوشتن من مشکل داره؟؟؟ میشه بگید کجاش؟؟

سجاد دریس

بفرمایید اینم از کدهای صحیح :

کدهای html
&lt;table class=&quot;navy&quot; border=&quot;1&quot;&gt;
&lt;tr&gt;
&lt;td&gt; 7learn &lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
کدهای css
table.navy{
 height:200px;width:200px;
background-color:red;
-moz-transition: width 2s;
-webkit-transition: width 2s;
}
table.navy:hover{
width:400px;
}
hamed_z2001

دستت درد نکنه … نوشتنامون که با هم فرق نداشت …موندم چرا ج نمیداد ….

hamed_z2001

یه سوال کلی که تو مثالهاتون بهش برخوردم اینه که مثلا تو همین مثال چرا تو فایل css برای سلکتور div که کلاس box تعریف شده به صورت :
div .boxتعریف شده؟؟ چرا به صورت box. خالی تعریف نشده؟؟؟ا ا جلسات قبلی به این مشکل برخوردم … اگه میشه منو راهنمایی کنید .
با تشکر

سجاد دریس

سلام
استایلی که با کلاس .box بتعریف میشه به همه ی تگ هایی که دارای کلاس box باشند اعمال میشه
اما div.box فقط بر روی تگ های div دارای کلاس box اعمال میشه.

arshin

سلام
مرسی از آموزش ها عالی بود .
یه سوال، بهتر واسه انیمشن از css استفاده کنیم یا jquery؟ جواب هرکدوم بود مزیتش نسبت به اون یکی چیه ؟ خودم فکر می کنمcss.

وحید صالحی

css توی ایجاد انیمیشن محدودیت داره و برای ایجاد انیمیشن های ساده خوبه در حالی که در جی کوئری بواسته پلاگین هایی که داره دست طراح رو برای ایجاد خلاقیت خیلی باز میزاره البته ویژگی انیمیشن در css3 ارئه شد و هنوز جای رشد داره ولی در کل css و جی کوئری رابطه بسیار خوب و نزدیکی دارن که ترکیب این 2 باهم فوق العاده میشه…

arshin

مرسی

سجاد دریس

سلام.
برای آموزش طراحی قالب در نظر گرفتم. همچین چیزی رو

رهاامیر چرمهینی

با سلام اگه امکان داره یدونه بنر اسلاید شو هم که هم بصورت خودکار اسلاید بشه و هم دکمه next & previous داشته باشه با html و css بصورت کامل بنوسید
با تشکر وارزوی توفیق

سجاد دریس

سلام.
طراحی responsive فرق میکنه با طراحی با مقدار %،
وقتی از مقدار درصد استفاده میکنیم، با تغییر اندازه مرورگر حتی 1px بازم کل اندازه های بقیه المنتا تغییر میکنه.
اما در responsive تعیین میکنیم که مثلا اگه اندازه مرورگر 1024*768 بود یا کوچیکتر(برای تبلت ها و موبایل ها) اندازه به مقدار مشخصی تغییر کنه. که با استفاده از media قابل انجامه.
البته الان بیشتر responsive رو با % انجام میدن، یعنی هم از media استفاده میکنن هم اندازها با % تعریف میشه، تا همیشه، وقتی اندازه مرورگر تغییر کنه، قالب به درستی نمایش داده بشه.
منتظر ادامه آموزش css باشید. روش media رو براتون کامل توضیح خواهم داد.

رها امیر چرمهینی

سلام اقای دریس
و تشکر ازبابت جواب
اما بالاخره و بعد از یک ماه سرچ جوابم رو پیدا کردم اونکه باید عرض با درصد تعریف بشه که مسلمه
اما به این طراحی ها میگن responsive که با المنتهای media در اندازه های عرض مختلف تعریف میشه حالا خواهشم اینه اگه برای شما مقدوره واطلاعی دارین در این زمینه یه اموزش مختصر بنویسید
که در دو عرض متفاوت چگونگی نوشتن و تعریف media در css رو توضیح بده ؟

با تشکر وارزوی توفیق

سجاد دریس

سلام.
آموزش ها رو دارم قرار میدم.
طراحی قالب هم چشم موقش که برسه اونم میذارم.

سجاد دریس

سلام.
اینم آموزش ایجاد انیمشین.

https://7learn.com/tutorials/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-css-%D9%81%D8%B5%D9%84-%DB%8C%D8%A7%D8%B2%D8%AF%D9%87%D9%85-%D8%AC%D9%84%D8%B3%D9%87-%D8%B3%D9%88%D9%85-%D8%A2%D8%B4%D9%86%D8%A7%DB%8C%DB%8C-%D8%A8%D8%A7

چندتا مثال هم گذاشتم اخر پست حتما به دردت میخورن

سجاد دریس

باشه منتظرتیم.

سجاد دریس

سلام.
همچین سایتهایی که میگید، عرض divهای اصلی (header-content-sidebar-footer) رو با % مقدار دهی میکنند و نه با px یا …
یعنی اینکه عرض divها درصدی از عرض پنجره مرورگر باشه، در این حالت، وقتی عرض پنجره مرورگر تغییر میکنه، عرض divها نیز تغییر میکنه و ثابت نیست.

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.