اُپن تگ | منابع و محتوای آموزشی برای طراحان وب
بدون نتیجه
نمایش همه نتایج
  • ثبت نام / ورود
  • خانه
  • مقالات
  • مرجع HTML
  • مرجع CSS
اپن تگ
  • خانه
  • مقالات
  • مرجع HTML
  • مرجع CSS
بدون نتیجه
نمایش همه نتایج
بدون نتیجه
نمایش همه نتایج
اپن تگ

خانه › CSS3 › ویژگی › ویژگی transition-delay در CSS

ویژگی transition-delay در CSS

transition-delay Property

عناصر مرتبط: 
transition-duration  trasition-property  transition

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

پست قبلی

ویژگی transition در CSS

پست بعدی

ویژگی transition-delay در CSS

پست بعدی
css-transition-duration-property

ویژگی transition-delay در CSS

دیدگاهتان را بنویسید لغو پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code

بنر مرجع html
بنر مرجع css

اُپن تگ

اپن تگ در تلاش است با گردآوری منابع و ارائه محتوای آموزشی در حوزه طراحی وب، راه را برای دسترسی طراحان وب و علاقه‌مندان به آخرین روش‌ها و تکنولوژی‌های این بخش از صنعت توسعه وب هموارتر سازد.

با خبر باشید!

برای اطلاع از مطالب ويژه و دوره های آموزشی جدید در خبرنامه اُپن‌تگ عضو شوید.

  • درباره
  • ارتباط با ما

تمامی حقوق برای اپن تگ محفوظ است. استفاده از مطالب تنها با ذکر منبع مجاز است.

  • ورود
  • ثبت نام
  • سبد خرید
  • خانه
  • مقالات
  • مرجع HTML
  • مرجع CSS

خوش آمدید!

به حساب خود وارد شوید

فراموشی رمز عبور ؟ ثبت نام

ساخت حساب کاربری!

فرم زیر را برای ثبت نام تکمیل نمایید

همه فیلد ها ضروری اند وارد شدن

رمز عبور خود را بازیابی کنید

لطفاً ایمیل یا نام کاربری خود را جهت بازیابی رمز عبور وارد نمایید

وارد شدن