თვისება transition-delay

თვისება transition-delay ადგენს დაყოვნებას გლუვი გადასვლის transition დაწყებამდე.

სინტაქსი

სელექტორი {
	transition-delay: დრო s-ში ან ms-ში;
}

მნიშვნელობები

მნიშვნელობა	აღწერა
`s`	ამახვილებს დროს წამებში (მაგალითად `3s`). შესაძლებელია წილადი მნიშვნელობების მითითება, მაგალითად, `0.5s` - ნახევარი წამი.
`ms`	ამახვილებს დროს მილიწამებში (მაგალითად `3ms`). ერთი წამი არის `1000` მილიწამი.

მნიშვნელობა ნაგულისხმევად: 0s.

მაგალითი

მიუთითეთ მაუსი ბლოკზე - 3 წამი არაფერი მოხდება (დაყოვნებაა 3s), და შემდეგ ის შეცვლის თავის სიგანეს 2 წამში. თუ შემდეგ მაუსი მოაშორებთ - მაშინ ისევ 3 წამი არაფერი მოხდება, და შემდეგ სიგანე გლუვად შემცირდება თავდაპირველ მნიშვნელობამდე:

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

#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 წამი (სიგანის შეცვლის დრო). თუ მაუსს მოაშორებთ - მაშინ ცვლილებები მოხდება საპირისპირო თანმიმდევრობით: თავდაპირველად შემცირდება სიგანე, და შემდეგ შემცირდება სიმაღლე:

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

#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;
}

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

თვისება transition-property,
რომელიც ადგენს თვისების სახელს გლუვი გადასვლისთვის
თვისება transition-duration,
რომელიც ადგენს გლუვი გადასვლის ხანგრძლივობას
თვისება transition-timing-function,
რომელიც ადგენს დროის ფუნქციას გლუვი გადასვლისთვის
თვისება transition,
რომელიც არის შემოკლება გლუვი გადასვლისთვის
თვისება animation,
რომლის დახმარებითაც შესაძლებელია ანიმაციის შექმნა