آموزش CSS 3 > انیمیشن عناصر در CSS 3 > خاصیت transition-delay

خاصیت transition-delay :

خاصیت transition-delay ، تعیین می کند اجرای افکت انیمیشن بعد از چند ثانیه تاخیر شروع شود یا خیر . این خاصیت بر مبنای میلی ثانیه ( ms ) یا ثانیه ( s ) تعیین شده و استفاده از آن اختیاریست . مقدار پیش فرض این خاصیت صفر است و به این معناست که انیمیشن بدون تاخیر اجرا خواهد شد .

شکل کلی استفاده از این خاصیت به صورت زیر است :

Syntax transition-delay : time ;

syntax توضیح موارد
توضیح مقدار
این پارامتر تعیین کننده مدت زمان تاخیر و اجرای انیمیشن بر حسب میلی ثانیه ( ms ) یا ثانیه ( s ) است . time

پشتیانی در مرورگر های مختلف :

متاسفانه این خاصیت در مرورگر 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>
 
خروجی


راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی


نظر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : پایتخت ایران ؟