رفتن به مطلب
iranwebserver
erfan

آموزش transition در CSS3

پست های پیشنهاد شده

سلام

تو این تاپیک به آموزش یکی از قابلیت های مهم CSS3 می پردازیم.با استفاده از خاصیت transition در CSS3 بدون استفاده از keyframes میتونید به اشیاء در صفحات انیمیشن بدید و این خاصیت فقط دستوراتی که در hover قرار داده شده رو به صورت انیمیشن میبره.

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

incompatible_ie.gifcompatible_firefox.gifcompatible_opera.gifcompatible_chrome.gifcompatible_safari.gif

  • اینترنت اسکپلورر از این خاصیت پشتیبانی نمی کند.
    موزیلا نیاز به پسوند -moz-
    اپرا نیاز به پیشوند -o-
    کروم و سافاری نیاز به پیشوند -webkit-

تعریف خاصیت transition در CSS3 :

برای تعریف این خاصیت کد های مربوط به transition در دیو اصلی تعریف شده در CSS قرار می گیرند و مدت و خاصیت انیمیشن رو مشخص میکنند.

کد زیر برای زمان بندی بر حسب ثانیه:




transition-duration: 5s;

برای مشخص کردن زمان انیمیشن درtransition از کد بالا استفاده می شود همانطور که می بینید زمان انیمیشن در بالا 5 ثانیه گذاشته شده

کد زیر برای انتخاب خاصیت انیمیشن:



transition-property:width;

  • برای انتخاب خاصیت انیمیشن در transition از کد بالا استفاده می شود.
  • برای مشخص کردن تمام دستورات در hover از all استفاده می شود.

خلاصه نویسی در transition :


transition: width 2s;

برای خلاصه نویسی تنها کافیه transition رو بنویسید و بعد با فاصله خاصیت ها رو پشت سر هم بنویسید.


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



[B]<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

div:hover
{
width:300px;
}
</style>
</head>
<body></body>
</html>[/B]

محتوای مخفی

    برای مشاهده لینک ها می بایست در وب سایت عضو باشید!

همونطور که در کد می بینید ما یک دیو رو در HTML ایجاد کردیم و بعد در CSS اون رو صدا زدیم سپس به اون خاصیت های مثل رنگ بکگراند ،طول و عرض رو دادیم و سپس با استفاده از transition مدت و دستور مربوط در hover رو مشخص کردیم حالا اگه این کد رو تست کنید می بینید که با بردن موس روی اون طولش بزگتر میشه.

با استفاده از این خاصیت از کدهای خسته کننده javascript هم راحت میشید.

محتوای مخفی

    برای مشاهده لینک ها می بایست در وب سایت عضو باشید!

ویرایش شده در توسط erfan

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

عرفان جان.

ممنون از توضیحاتت.

ولی این سایت کار ما رو خیلی راحت میکنه:

محتوای مخفی

    برای مشاهده لینک ها می بایست در وب سایت عضو باشید!

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

ولی یه خورده زور میاد به آدم تا این چیزای راحت هست بریم یه ساعت با کد و عدد ور بریم!

خودت که بهتر میدونی ;)

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

سلام.

عرفان جان، کسی که از طریق اینکار کسب درآمد میکنه وقت نمیکنه، باید از یکسری ابزارها استفاده کرد، من هم این سایت رو که به تازگی پیدا کردم (سایتی که محمد acrobat معرفی کرد) و فهمیدم صرفه جویی در زمان چقدر تاثیرگذاره! مطمئن هستم تعداد کمی از ایرانیا با این وبسایت آشنا باشم، وبسایت های دیگه هم مثل

محتوای مخفی

    برای مشاهده لینک ها می بایست در وب سایت عضو باشید!
هستند که میتونن مفید باشن، CSS چیزیه که کوچیکترین اشتباه میتونه فاجعه بار باشه.

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

برای ارسال دیدگاه یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید دیدگاهی ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در سایت ما ثبت نام کنید. عضویت خیلی ساده است !

ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید

ورود به حساب کاربری

×