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