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 پشتیبانی می کنند.