cssblog.ir logo
P

transition-delay

تاخیر شروع transition

مشخصه transition-delay می‌تواند اجرا شدن transition ها را به اندازه زمان مشخصی به تعویق انداخته یا حتی در مدت زمان اجرای آنها را به جلو حرکت کند

می توان گفت که این مشخصه به نوعی از زیر مشخصه‌های transition می‌باشد و کاربرد آن تعیین تاخیر برای شروع اجرایtransition ها می باشد.

مقادیری که می توان برای این مشخصه تعیین کرد می توانند به دو صورت باشند:

مقادیر مجاز زمان

با استفاده از واحدهای ثانیه و میلی ثانیه می توان اعداد اعشاری یا صحیح را بعنوان زمان تاخیر وارد نمود

مثال:

div {
    transition: all 2s ease;
    transition-delay: 0.5s;
}

لیستی از مقادیر

می‌توان تعدادی مقادیر را با استفاده از کاما (,) جدا کرد و بعنوان زمان تاخیر برای transition های مختلف همان مشخصه، وارد نمود.

مثال:

div {
    transition: width 2s ease, height 1.5s ease;
    transition-delay: 0.2s , 0.1s;
}

مقادیر منفی

نکته ای که درباره این مشخصه وجود دارد این است که می‌توان برای آن مقدار منفی وارد نمود. اما خب سوالی که پیش می‌آید این است که چطور می‌تواند زمان شروع یک چیزی منفی باشد؟ خب، سوال منطقی و بجائی است. کاری که مقدار منفی انجام می‌دهد مانند این می‌ماند که تایم لاین آنtransition را به میزان آنdelay به جلو برده و در لحظه شروع،transition دیگر از لحظه ۰ شروع نشود. برای درک بهتر مثال زیر را در نظر بگیرید.

در مثال زیر جعبه زیر دارایtransition با زمان ۳ ثانیه و بدون هیچ تاخیری است. با گرفتن موس روی جعبه، به نحوه تغییر رنگ آن را دقت کنید.  

 حال نحوه تغییر رنگ مثال بالا را با این مثال مقایسه کنید که به همان عنصر به اندازه -1.5 ثانیهdelay گرفته است

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

پیشنهاد می شود که نگاهی به جدول پشتیبانی این مشخصه توسط مرورگرها داشته باشید و در صورت نیاز از vendor-prefix ها برای افزایش پشتیبانی از مرورگرها، استفاده کنید. مانند:

button {
    -webkit-transition-delay: 700ms;
    -moz-transition-delay: 700ms;
    -o-transition-delay: 700ms;
    transition-delay: 700ms;
}

دیدگاه کاربران

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

تاکنون دیدگاهی ثبت نشده است. شما می توانید اولین شخصی باشید که دیدگاه خود را ارسال می کند

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

نکاتی درباره دیدگاه ها

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند