ဂုဏ်သတ္တိ transition-delay

ဂုဏ်သတ္တိ transition-delay သည် ချောမွေ့အကူးအပြောင်း transition စတင်မှု မတိုင်မီ နှောင့်နှေးချိန်ကို သတ်မှတ်ပေးသည်။

သဒ္ဒါဖွဲ့စည်းပုံ

cssselector {
  transition-delay: အချိန် s သို့မဟုတ် ms;
}

တန်ဖိုးများ

စံထားရှိသော တန်ဖိုး - 0s။

ဥပမာ

ဘလောက်ပေါ်သို့ မောက်စ်ဖြင့်ထောက်၍ နေရာယူပါ - 3 စက္ကန့် ဘာမှဖြစ်မည်မဟုတ် (3s နှောင့်နှေးချိန် ရှိနေသည်)၊ ထို့နောက် ၎င်းသည် မိမိ၏အကျယ်ကို 2 စက္ကန့်အတွင်း ချောမွေ့စွာ ပြောင်းလဲမည်။ ထို့နောက် မောက်စ်ကို ဖယ်ရှားလိုက်ပါက - ထပ်၍ 3 စက္ကန့် ဘာမှဖြစ်မည်မဟုတ်၊ ထို့နောက် အကျယ်သည် မူလတန်ဖိုးသို့ ပြန်လည် ချောမွေ့စွာ ကျဆင်းသွားမည် -

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  transition-duration: 2s;
  transition-property: width;
  transition-delay: 3s;
  height: 50px;
  width: 100px;
}
#elem:hover {
  width: 400px;
}

Результат:

ဥပမာ

ဘလောက်ပေါ်သို့ မောက်စ်ဖြင့်ထောက်၍ နေရာယူပါ - ၎င်းသည် ပထမဦးစွာ မိမိ၏ အကျယ်ကို 2 စက္ကန့်အတွင်း ပြောင်းလဲမည်၊ ထို့နောက် မိမိ၏အမြင့်ကို 4 စက္ကန့်အတွင်း ပြောင်းလဲမည်။ ဂုဏ်သတ္တိများသည် အစဉ်လိုက် ပြောင်းလဲသွားမည်၊ အဘယ်ကြောင့်ဆိုသော် အမြင့်အတွက် ၎င်း၏ နှောင့်နှေးချိန်ကို 3 စက္ကန့်အဖြစ် သတ်မှတ်ထားသောကြောင့်ဖြစ်သည် (အကျယ် ပြောင်းလဲချိန်)။ မောက်စ်ကို ဖယ်ရှားလိုက်ပါက - ပြောင်းလဲမှုများသည် ပြောင်းပြန် အစဉ်အတိုင်း ဖြစ်ပေါ်လာမည် - ပထမဦးစွာ အကျယ် ကျဆင်းသွားမည်၊ ထို့နောက် အမြင့် ကျဆင်းသွားမည် -

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  transition-duration: 2s, 4s;
  transition-property: width, height;
  transition-delay: 0s, 3s;
  width: 100px;
  height: 25px;
}
#elem:hover {
  width: 400px;
  height: 50px;
}

Результат:

ဤသည်ကိုလည်း ကြည့်ရှုပါ