انتخاب رنگ سبز انتخاب رنگ آبی انتخاب رنگ قرمز

تبدیل از یک حالت به حالت دیگر با CSS Transitions

CSS Transitions

با استفاده از CSS Transitions شما می توانید بدون استفاده از فلش یا جاواسکریپت با hover المنت خود را از یک حالت به حالت دیگری تغییر دهید .
با ماوس خود روی گیلاس تصویر زیر بروید !


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

اینترنت اکسپلورر و اوپرا هنوز از تبدیل سه بعدی پشتیبانی نمیکنند ( آن ها فقط تبدیل دو بعدی را پشتیبانی میکنند ).
فایرفاکس برای این ویژگی نیاز به پیشوند -moz- دارد .
کروم و سافاری برای این ویژگی نیاز به پیشوند -webkit- دارند.
اپرا برای این ویژگی نیاز به پیشوند -o- دارد .
چگونه کار می کند

CSS3 transition باعث میشود حالت یک المنت به حالت دیگری تغییر کند .

برای انجام دادن آن شما باید دو کار انجام دهید :
  • نوع ویژگی ای که میخواهید آن را تغییر حالت دهید مثلاً width (اگر میخواهید همه ویژگی ها تغییر کند all استفاده کنید)
  • مدت زمان تغییر حالت ها
نمونه (تغییر عرض طی 2 ثانیه)
Internet ExplorerFirefoxChromeSafariOpera
div
{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
}

نکته در صورتی که هیچ زمانی داده نشود هیچ افکتی رخ نخواهد داد چون زمان دیفالت 0 ثانیه است .
افکت زمانی رخ میدهد که مقدار ویژگی مورد نظر مثلاً width تغییر کند :
نمونه (تغییر عرض از 100 پیکسل به 300 پیکسل)
Internet ExplorerFirefoxChromeSafariOpera
div
{
width:100px;
}

div:hover {
width:300px;
}
تغییرات چندگانه

با جدا کردن ویژگی ها و زمان با کاما میتوانید همزمان چند تغییر برای چند ویژگی با زمان های مختلف تعریف کنید :

نمونه (تغییرات چندگانه)
Internet ExplorerFirefoxChromeSafariOpera
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;
}
شرح دادن ویژگی های فوق

برای دیدن صفحه مخصوص هر یک از ویژگی های فوق روی نام آن ها کلیک کنید :

وی بی ایران در Facebook

صفحه رسمی وی بی ایران در فیس بوک قصد دارد تا بهترین مطالب را به Stream شما ارسال کند . اگر میخواهید :
  • استایل های جدید
  • هک های جدید
  • مقاله های محبوب
  • خبر های جدید ویبولتین
  • و ..
برای شما ارسال شود ، هم اکنون پیج ما را لایک کنید .
برای ورود به صفحه رسمی وی بی ایران روی آیکن فیس بوک کلیک کنید .