2019 September 20 - جمعه 29 شهرويور 1398
آموزش Css3 – قسمت هشتم – Transitions
کد خبر: ١٩٣٨ تاریخ انتشار: ١٧ بهمن ١٣٩١ - ١٩:١٧ تعداد بازدید: 1452
آموزش Css3 – قسمت هشتم – Transitions

سلام
امروز راجع به افکتها در سی اس اس ۳ می خواهم برای شما بنویسم. در سی اس اس ۳ بدون استفاده از جاوا اسکریپت یا فلش ما می توانیم افکتهای حرکتی بر روی اجزاء صفحه وب خود داشته باشیم.

سلام

امروز راجع به افکتها در سی اس اس ۳ می خواهم برای شما بنویسم. در سی اس اس ۳ بدون استفاده از جاوا اسکریپت یا فلش ما می توانیم افکتهای حرکتی بر روی اجزاء صفحه وب خود داشته باشیم.

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

مرورگر IE از قابلیت Transitions پشتیبانی نمی کند.

مرورگر Firefox با پیشوند -moz- پشتیبانی می کند.

مرورگر Chrome و Safari با پیشوند -webkit- پشتیبانی می کند.

مرورگر Opera با پیشوند -o- پشتیبانی می کند.

افکتها چگونه کار می کند؟

با استفاده از قابلیت جدید سی اس اس ۳ ما میتوانیم یک جزء از صفحه وب را به حالت دیگر تبدیل کنیم. این تغییرات می تواند شامل همه خاصیتهای قابل تغییر باشد.

جهت استفاده از افکتها ما باید دو چیز را مشخص کنیم.

اول اینکه قرار است افکت چه تغییراتی ایجاد کند

دوم اینکه در چه مدت زمانی این تغییرات باید انجام شود ( مدت زمان اجرا افکت )

مثال ۱ :

div
{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
}

در مثال بالا افکت ۲ ثانیه بر روی عرض تگ div اجرا می شود.

توجه داشته باشید اگر مدت زمان درج نشود هیچ اتفاقی نخواهد افتاد چون زمان پیش فرض ۰ ثانیه است.

زمان شروع افکت دقیقا موقعی خواهد بود که خاصیتی که تعریف کرده ایم تغییر کند. در مثال ۱ در صورتی که خاصیت width تغییر کند افکت اجرا می شود.

مثال ۲ :

div:hover
{
width:300px;
}

در مثال بالا تعریف کرده ایم که در صورتی که نشانگر موس بر روی div قرار گرفت عرض آن به ۳۰۰ پیکسل افزایش یابد و پس از افزایش به صورت خودکار افکت پس از ۲ ثانیه اجرا می گردد.

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

جهت تغییرات بیشتر در یک افکت می توانیم آنها را با , از هم جدا کنیم.

مثال ۳ :

div
{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}

در مثال بالا برای خاصیتهای widthو height و transform افکت به مدت ۲ ثانیه فعال شده است.

مثال ۴ :

div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari and Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}

در مثال بالا از همه ویژگیهای افکت استفاده شده است.

مثال ۵ :

div
{
transition: width 1s linear 2s;
/* Firefox 4 */
-moz-transition:width 1s linear 2s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
-o-transition:width 1s linear 2s;
}

دقیقا مثل مثال ۴ ولی خلاصه تر

موفق باشید



Share
* نام:
ایمیل:
* نظر:

آخرین مطالب


صفحه اصلی | تماس با ما | درباره ما | آرشیو | پیوندها | RSS
طراحی و تولید: مؤسسه احرار اندیشه