თვისება transition

თვისება transition არის შემოკლება გლუვი გადასვლებისთვის, ის საშუალებას აძლევს ერთდროულად დააყენოთ transition-duration, transition-property, transition-timing-function და transition-delay.

სინტაქსი

სელექტორი {
	transition: მნიშვნელობა;
}

თვისებების თანმიმდევრობას მნიშვნელობა არ აქვს, თუმცა შესრულების დრო (transition-duration) უნდა იყოს დაყოვნებამდე (transition-delay).

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

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

მნიშვნელობა none აუქმებს ყველა გადასვლას (ისინი მოხდება მყისიერად).

მაგალითი

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

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

#elem {
	border: 1px solid black;
	transition: width 2s ease 3s;
	width: 100px;
	height: 50px;
}
#elem:hover {
	width: 400px;
}

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

თვისება animation,
რომლის დახმარებითაც შესაძლებელია ანიმაციის შექმნა