transition-delay

ویژگی transition-delay مدت زمان مکث یا درنگ قبل از اعمال transition بر روی یک عنصر را تعیین می کند.

به این معنا که اگر ویژگی از ویژگی های یک عنصر دارای transition باشد, زمانی که آن ویژگی بخواهد تغییر کند اگر ما برای آن transition-delay تعیین کنیم, آن ویژگی به همان مدت زمان مکث دارد و سپس شروع به تغییر می کند.

واحد زمانی این ویژگی می تواند ثانیه و یا میلی ثانیه باشد و مقدار پیشفرض آن 0 است به این معنا که ویژگی فورا شروع به تغییر می کند و مکث نخواهد داشت.

فرض کنید می خواهید پس زمینه عنصری را زمانی که در حالت hover: قرار می گیرد از زرد به قرمز تبدیل کنید و این تبدیل با transition صورت بگیرد اما می خواهید اعمال این تغییر پس از گذر 1 ثانیه شروع شود کافی است به صورت زیر عمل کنید:


.element {
    background-color: yellow;
    transition-property: background-color;
    transition-duration: .6s;
    transition-timing-function: linear;
    transition-delay: 1s;
}

.element:hover {
    background-color: red;
}

اگر بخواهیم واضح تر بیان کنیم خواهیم گفت: در مثال بالا ویژگی transition-delay به ویژگی background-color در زمان hover شدن عنصر می گوید “یک ثانیه صبر کن سپس شروع به تغییر کن”.

 

مقدار این ویژگی منفی هم می تواند باشد که در این صورت تغییر بدون درنگ شروع می شود اما یک پرش در زمان انجام (transition-duration) ترنزیشن به وجود خواهد آمد و آن پرش برابر با مدت زمان منفی است که به ویژگی درنگ داده شده است. به بیان دیگر اگر مدت زمان تغییر چهار ثانیه باشد و مدت زمان درنگ منفی یک ثانیه باشد, آنگاه تغییر از ثانیه دومش نمایش داده می شود و یک پرش یک ثانیه ای خواهیم داشت.


.element {
    background-color: yellow;
    transition-property: background-color;
    transition-duration: 4s;
    transition-timing-function: linear;
    transition-delay: -1s; /* این باعث می شود تا یک ثانیه اول تغییر دیده نشود */
}

.element:hover {
    background-color: red;
}

شما می توانید یک درنگ مثل بالا تعیین کنید و یا چند درنگ که با استفاده از ویرگول از هم جدا شدند را داشته باشید:


div {
  transition-delay: .6s, 1.5s, 2s;
}

زمانی که شبیه به روش دوم درنگ را برای transition تعیین می کنید باید ترتیب آنها را در زمان تعیین دیگر ویژگی های transition در نظر داشته باشید. دیگر ویژگی های transition شامل موارد زیر هستند:
transition-property
transition-duration
transition-timing-function

در مثال زیر ویژگی color دارای دوره زمانی 2s و transition-timing-function آن برابر ease و درنگ آن برابر 3 ثانیه می باشد و دیگر ویژگی ها هم به ترتیب به همین صورت مقادیرشان تعیین می شود.


.element {
  transition-property: color, background-color, left, top;
  transition-duration: 2s, 1s, .3s, .2s;
  transition-timing-function: ease, steps(3, end), ease-out, ease-in;
  transition-delay: 3s, 1.5s, 700ms, 2s;
}

مقدار دهی این ویژگی به روش های زیر مجاز است:


  transition-delay: 3s;
  transition-delay: 300ms;
  transition-delay: .6s, 250ms, 4s;

 

درنگ در ترنزیشن ها زمانی خیلی مفید خواهد بود که شما می خواهید چندین ترنزیشن را به صورت زنجیره ای پشت سر هم داشته باشید برای رسیدن به این هدف باید برای ترنزشین دوم حداقل یک مکث برابر با مدت زمان (transition-duration) ترنزیشن اول تنظیم کنید و یا بیشتر.

در مثال زیر تغییر رنگ انجام نمی شود تا زمانی که تغییر مکان به اتمام برسد و این کار به وسیله درنگ در ترنزیشن قابل انجام می باشد:


.element {
    background-color: blue;
    position: relative;
    left: 0;
    transition-property: left, background-color;
    transition-duration: .4s, .4s;
    transition-timing-function: ease, ease-out;
    transition-delay: 0s, .4s; 
}

.element:hover {
    left: 400px;
    background-color: #009966;
}

دموی زیر برای بررسی بیشتر آماده شده است:

 

See the Pen transition-delay by Mojtaba Seyedi (@seyedi) on CodePen.


 

 

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

سوالت رو توی پنل بحث و گفتگو مطرح کن.

30 دیدگاه برای “transition-delay

    1. سلام.
      دقیقا این ویژگی ها هم مثل بقیه ویژگی هایی که انیمیشن میشه براشون نوشت عمل می کنند.
      از opacity که خیلی استفاده میشه توی انیمیشن ها ولی z-index رو حتی خیلی ها نمی دونن که میشه واسش انیمیشن نوشت.

      دموی زیر رو بررسی کنید اگر موردی بود مطرح کنید:

      http://jsbin.com/koyemo/edi

      عنصری که متحرک هستش z-index واسش انیمیشن داره. و عنصر شماره 3, opacityش در حال تغییره هر لحظه.

  1. سلام

    z-indexدر کد زیر
    @-webkit-keyframes image4 {
    0% { top: 0px; opacity: 0; }
    56% { top: 0px; opacity: 0; }
    60% { top: 0px; opacity: 1; }
    64% { top: 0px; opacity: 1; z-index:0}
    76% { top: 0px; opacity: 1; z-index: 0; }
    81% { top: 0px; z-index: -1; }
    100%{ top: 0px; z-index: -1; }
    }
    به این معنی هستش که در زمانهای مختلف عکس موردنظر در اسلایدر جابجا میشه؟

    1. بله. به معنای واقعی جابجایی نمیشه بهش گفت اما بله از لحاظ دیداری همونه. یک لایه ای که رسم میشه بالا پایین میشه به وسیله z-index.

    1. عمده تفاوتش اینه که در یک زمان مشخص در transition ها فقط یک حالت اول و یک حالت آخر تحت کنترل ماست. اما در انیمیشن ها هر لحظه ای از کار رو می تونیم کنترل کنیم. و زمان های بین زمان شروع و آخر رو هم تحت کنترل داریم.

      ترنزیشن ها رو انیجا میتونین یاد بگیرین: http://css-tricks.ir/?p=1208
      انیمیشن ها رو انیجا: http://css-tricks.ir/?p=1401

  2. سلام

    ویژگی z-index رو برای تمام زمانها میتونیم قرار بدیم؟
    در کدی که فرستادم معنی مقدار 0 و 1- برای این ویژگی به ترتیب حالت ابتدای عکس و برگشتن به حالت اولیه هست؟

    ممنون

    1. بله. زمانی که عنصر حالت های خاصی از position رو داره.

      مطلبی که در مورد کدتون هم گفتین درسته.

      اگر مشکلی در موردی که درگیرش هستین هست و فک میکنید من می تونم کمکتون کنم کدتون رو آپلود کنید توی یکی از دو سایتی که میگم یا هر جای دیگری شبیه به اونا و لینکش رو اینجا بزارید و مساله رو مطرح کنید تا باهم بتونیم بهتر بررسیش کنیم.

      codepen.io
      jsbin.com

  3. کدها مربوط به ساخت اسلایدره که در قسمت

    @-webkit-keyframes image1 متوجه نمیشم که z-index رو چرا برای بعضی زمانها درنظر میگیره ، منظورم اینکه که برای زمانهای مختلف چطور مقدار z-index تعیین میشه که اسلایدر درست کار کنه؟
    در چه بازه زمانی باید ویژگی z-index را قرار بدیم؟

    اگر امکان دارد ایمیلی بفرستید که کدها رو بفرستم
    ممنون

    1. اول از همه کد رو مرتب کردم که درکش راحت تر بشه. در ضمن اینجا نیازی به کار با z-index هم نبود. تقریبا اگر موردی توی مرورگرهای خاصی بوجود نیاد همین opacity کفایت میکنه.

      اینجا کد رو می تونید ببینید: http://jsbin.com/salemi/1/edit

      ما 5 تصویر داریم می خوایم هر کدومشون به مدت 5 ثانیه دیده بشن. پس نیاز به 25 ثانیه در کل داریم. پس باید هر تصویر انیمیشنی داشته باشه که مدت زمانش 25 ثانیه است.

      حالا تصویر اول باید از ثانیه 0 تا 5 نمایش داده بشه پس باید opacity=1 رو از 0 تا 5 ثانیه واسش نوشت.

      تصویر دوم باید از ثانیه 5 تا 10 دیده بشه پس opacity اون هم باید توی این بازه 1 بشه. و در بقیه زمانهای انیمیشن, باید 0 باشه.

      خب حالا در مورد تصویر اول و انیمیشن اون:

      باید در ثانیه 5 اپسیتیش بشه 0. و همینطور می دونیم که ثانیه 5 میشه 20% زمان انیمیشن (تناسب می گیریم) پس باید بنویسیم:
      0% {opacity: 1}
      20% {opacity: 0}

      خب تا الان همه چی مثلا درسته. یعنی اول کار اپسیتی 1 هست و ثانیه 5 اپسیتی 0 میشه و عنصر ناپدید میشه. اما نکته ای که هست اگر ما اینطوری بنویسیم اپسیتی از ثانیه 0 تغییرات خودش رو شروع میکنه تا مقدارش بشه 1. یعنی تغییر 1 به 0 رو توی پنج ثانیه انجام میده. ولی ما نمی خوایم این اتفاق بیافته. بلکه می خوایم مثلا تا ثانیه چهار, تصویر کاملا شفاف باشه (یعنی اپسیتیش 1 باشه) و مثلا تازه از ثانیه 4 شروع کنه به ناپدید شدن پس باید بنویسم:

      0% {opacity: 1}
      16% {opacity: 1}
      20% {opacity: 0}

      (اونکه می بینید 21% گذاشته چون میخواسته حالتی رو در بیاره که قشنگ تر توی تصویر شماره دو محو بشه. به بیان دیگه میخواسته تغییرات اپسیتیه تصویر یک و دو در اطراف ثانیه 5 کمی تداخل داشته باشن تا افکت بهتر جلوه کنه.)

      و همینطور می خوایم تصویر اول تا ثانیه تقریبا 25 ناپدید باشه (چون در این بازه زمانی بقیه تصاویر باید بیان و برن ) و چون می خوایم انیمیشن و اسلایدر ادامه دار باشه پس باید دوباره در ثانیه 25 تصویر اول آشکار بشه پس می نویسیم:

      100% {opacity: 1}

      حالا باز شاید بپرسید 96% اونجا چکاره است. خب دقیقا مثل توضیح اولی که داده شد.

      اگر اون رو اونجا ننویسیم تغییر اپسیتی از حالت صفر به 1 از ثانیه 5 (20%) انجام میشه. که ما این رو نمی خوایم. ما می خوایم تا نزدیک ثانیه 25 ناپدید باشه و مثلا توی ثانیه 24 شروع کنه به ظاهر شدن پس باید بنویسیم:

      96% {opacity: 0}
      100% {opacity: 1}

      بقیه انیمیشن ها رو هم با همین منطق میشه فهمید.

      تصویر متحرک زیر رو هم چک کنید شاید کمکتون کنه:

      http://mojoimage.com/free-i

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

      اگر نکته ای بود حتما بگید.

  4. سلام

    اگر امکان دارد سایتی را معرفی کنید که منوی افقی با زیرمنوی افقی (مثل سایت دیجی کالا) را آموزش میدهد.
    زیرمنوی افقی رو نمیتونم درست کنم که با هاور شدن ظاهر میشه
    ممنون

    1. آره ولی برای ورژن های خیلی پایین ie هستش که نیازی نیست بنویسید.
      ولی اگر می خواید در نسخه هشت کار کنه اینطوری بنویسید:

      -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=100)”;

      در ضمن این لینکو چک کنید:

      https://css-tricks.com/snip

  5. ممنون.

    قسمت توضیح مربوط به فیلترها نوشته بودید:
    filter: opacity(0.32);
    این درسته؟

    منوی پایین این سایت رو میشه با css درست کرد؟

    میشه روش ساختش رو توضیح بدید؟

    1. آره اول متوجه نشدم در مورد فیلترها صحبت می کنید. (اگر هر کامنتی رو زیر پست مربوطش بزارید خیلی به من کمک می کنید.) بله همون درسته. در ضمن اینو مگه چک نکردید:

      http://tools.css-tricks.ir/

      اینجا می تونید تست کنید.

      منظورتون قسمت آخرین اخبارو ایناست دیگه؟ بله میشه درست کرد.

      نه راستش توضیح دادنش توی یک کامنت جاش نیست.

  6. یعنی برای ساخت اون منو ی پایین صفحه (پیشنهادات ویژه سورس کد ) که در ابتدا مخفیه و بعدبا hover شدن ظاهر میشه فقط از css استفاده شده؟

    اول منو ایجاد شده و بعد display:block شده؟
    اگر امکان داره توضیح مختصری بدید.
    ممنون

  7. کدمنوی پایین ، فقط در مرورگر ie درست اجرا میشه ، در مرورگرهای firefox و chrome زمانیکه هاور میشه اسکرول عمودی دیده نمیشه
    پیشوند -moz- و -webkit- رو هم نوشتم.

  8. بله منوی همون سایت . کدی که شما فرستادین هاورش تو مرورگرهای firefox و chrome اجرا نمیشه.
    من فقط تو هاور کدی که فرستادین مشکل دارم. زمانیکه هاور میشه اسکرول عمودی حذف میشه.

    کد (کدی که شما فرستادین)رو در حالت دوبعدی هم نوشتم (translate) ، ولی بازهم اسکرول میره.

    1. طبیعی هستش که اسکرول حذف بشه دیگه چون محتوایی بیرون از صفحه وجود نداره در زمان hover. اون آیتم کشیده میشه بالا و دیگه محتوایی خارج از viewport وجود نداره.

      من چون فقط می خواستم مطلب رو برسونم خیلی دقیق نشدم. و الا باید position رو fix بدید.

      http://jsbin.com/xiroyi/2/edit

      همچنین اگر میخواین توی ie 8 کار کنه باید از bottom و یا امثال اون استفاده کنید:

      http://jsbin.com/civada/1/edit

  9. سلام

    کدهای مربوط به ساخت منوی آبشاری رو به ایمیلتون(support@css-tricks.ir) می فرستم
    زمانیکه روی ” کالای دیجیتال ” موس رو میبرم زیرمنوی اول دیده میشه ولی زمانیکه روی ” موبایل ” میخوام موس رو ببرم نمیشه . زیرمنوی دوم دیده نمیشه. امکان داره که ایرادش رو برطرف کنید.
    ممنون

  10. عذرخواهی می کنم این مشکل رو برطرف کردم. ولی زمانیکه روی گزینه ” لوازم خانگی ” موس رو میبرم زیرمنوی مربوط به اون مثل حالتی که موس روی ” کالای دیجیتال ” میره ، نمیشه منظورم باکس زیرمنو هستش که از ابتدا شروع نمیشه ، شبیه منوی دیجی کالا نمیشه.

    1. با سلام. فرض کنید هر کسی بیاد مشکلات طراحیشو زیر پست ها بپرسه. من چطوری میتونم به همه جواب بدم!؟ واقعا امکانش واسم نیست. و ازتون عذر خواهی می کنم.

      در ضمن به امید خدا در آینده نزدیک محیطی برای رفع چنین مشکلاتی آماده می کنم. فعلا می تونید از فروم های سایت های طراحی وب استفاده کنید. موفق باشید.

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