transition-delay հատկությունը

transition-delay հատկությունը սահմանում է ուշացում հարթ անցումը մեկնարկելուց առաջ transition:

Շարահյուսություն

cssընտրիչ {
  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;
}

Результат:

Տես նաև