آموزش CSS 3 > انیمیشن عناصر در CSS 3 > خاصیت transition-property
خاصیت transition-property :
خاصیت transition-property ، تعیین کننده خاصیتی است که در طی فرآیند انیمیشن در عنصر
از یک مقدار اولیه به مقدار ثانویه تغییر خواهد کرد .
برای مثال می توان خاصیت width ( پهنای عنصر ) یا رنگ ( color ) ، عنصر باشد .
در طی فرآیند انیمیشن مثلا width عنصر ا ز 100 پیکسل به 300 پیکسل ، یا رنگ آن از زرد
به آبی تغییر می کند .
نکته : معمولا عملیات انیمیشن با رفتن موس بر روی عنصر ( متد hover
) فعال می شود .
شکل کلی استفاده از این خاصیت به صورت زیر است :
|
Syntax
|
transition-property : none | all | property ;
|
|
توضیح
|
هیچ خاصیتی در عنصر تغییر نکرده و عمل انیمیشن انجام نمی شود .
|
همه خواص تعیین شده برای عنصر تغییر خواهند کرد و انمیشن اجرا می شود .
این مقدار ، مقدار پیش فرض است .
|
|
یک خاصیت تعیین شده و در طی عمل tranistion تغییر می کند . مثلا خاصیت width
.
|
پشتیانی در مرورگر های مختلف :
متاسفانه این خاصیت در مرورگر IE پشتیانی نمی شود ( مگر در نسخه 10 در آینده ) و توسط
هیچ کدام از مرورگر های مطرح دیگر به صورت عادی پشتیانی نمی شود . برای پشتیبانی در
مرورگرهای مختلف باید برای هر کدام ، کد لازم آنها که در جدول زیر آمده را استفاده
نمود :
|
مرورگر فایرفاکس با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی
این مرورگر باید خاصیت را به صورت moz-transition-property- بنویسید .
|
|
مرورگر اپرا با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این
مرورگر باید خاصیت را به صورت o-transition-property- بنویسید .
|
|
این خاصیت پشتیانی نمی شود .
|
|
مرورگر کروم با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این
مرورگر باید خاصیت را به صورت webkit-transition-property- بنویسید .
|
مثال :
در مثال زیر با استفاده ار خاصیت 8 ، پهنا و ارتفاع
< html >;
< head >
< style >
img
{
width:100px;
height:100px;
transition-property:
width,height;
transition-duration:
2s;
-moz-transition-property:
width,height; /* Firefox 4 */
-moz-transition-duration:
2s; /* Firefox 4 */
-webkit-transition-property:
width,height; /* Safari and Chrome */
-webkit-transition-duration:
2s; /* Safari and Chrome */
-o-transition-property: width,height;
/* Opera */
-o-transition-duration: 2s;
/* Opera */
}
img:hover
{
width : 400px ;
height : 200px ;
}
< /style >
</head>
<body>
< img src = " ../Pic/Banner.gif "
>
</body>
</html>
|
|
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نظر خودتان درباره این صفحه را با ما در میان بگذارید :