ویژگی transition-delay در CSS

transition-delay Property

ویژگی transition-delay در CSS مشخص می کند که افکت های transition چه زمانی شروع می شوند.

نحوه نوشتار

transition-delay: 3s;
transition-delay: 2s, 4ms;

مقدار تاخیر می تواند 0، مثبت و یا منفی باشد.

• در مقدار 0s یا 0ms افکت های transition درجا شروع می شوند.
• در مقادیر مثبت، افکت ها بعد از تاخیری برابر با مقدار داده شده شروع می شوند.
• در مقادیر منفی، افکتها درجا شروع می شوند. در واقع افکت ها از میانه راه شروع می شوند؛ بدین ترتیبب که به اندازه مدت زمان داده شده، افکت ها شروع شده و در حال اجرا بودند.

در مثال زیر نحوه عملکرد این ویژگی را میبینیم:

در این مثال میبینیم که در باکس بالایی به محض اینکه ماوس را روی عنصر می بریم عرض باکس زیاد می شود اما رنگ پس زمینه آن پس از 1 ثانیه تغییر میابد. این عملکرد به این دلیل است که در تعریف ویژگی transition برای این عنصر تنها به ویژگی background-color اشاره شده، بنابراین ویژگی transition-delay تنها برای ویژگی background-color عمل می کند.
اما در باکس پایین همانطور که مشاهده می شود، ویژگی transition برای تمام ویژگی ها اعمال شده؛ پس ویژگی transition-delay نیز به تمام ویژگی ها اعمال خواهد شد.

مشاهده و ویرایش کد در حالت تمام صفحه

html

<div class="box1">
        ماوس را روی این عنصر نگه دارید
</div>
<hr />
<div class="box2">
        ماوس را روی این عنصر نگه دارید
</div>

css

.box1,
.box2 {
   width: 230px;
   padding: 20px 0;
   margin: 13px auto;
   text-align: center;
   background-color: dodgerblue;
   color: white;
   font: bold 16px calibri;
}
.box1 {
   transition: background-color 0.3s ease;
   transition-delay: 1s;
}
.box2 {
   transition: all 0.3s ease;
   transition-delay: 1s;
}
.box1:hover {
   width: 350px;
   background-color: orangered;
}
.box2:hover {
   width: 350px;
   background-color: orangered;
}

پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی در CSS پشتیبانی می کنند.