თვისება transition-property

თვისება transition-property ადგენს იმ თვისებას, რომელიც ანიმირებული იქნება გლუვი გადასვლით transition. მნიშვნელობად უნდა გადაეცეს CSS თვისების სახელი, რომელიც ანიმირებული იქნება. თუ მნიშვნელობად all მიენიჭება (ის ნაგულისხმევად არის დაყენებული) - ყველა თვისება ერთდროულად ანიმირებული იქნება.

სინტაქსი

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

მაგალითი

მაუსი დაასხით ბლოკს - ის გლუვად შეცვლის სიგანეს, რადგან transition-property აქვს მნიშვნელობა width:

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

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

მაგალითი . მნიშვნელობა all

ამ მაგალითში transition-property აქვს მნიშვნელობა all - ამიტომ გლუვად შეიცვლება ყველა ის თვისება, რომელიც დაწერილია მდგომარეობისთვის hover (ჩვენს შემთხვევაში ეს არის width და height). ყველა ცვლილება გაივლის ერთი და იგივე დროში, რომელიც მითითებულია transition-duration-ში:

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

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

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

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