თვისება 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;
}

Результат:

იხილეთ აგრეთვე