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