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 յատկությունը,
որի օգնությամբ կարելի է անիմացիա ստեղծել