Vetia transition-timing-function

Vetia transition-timing-function vendos shpejtësinë e ndryshimit (përshpejtimin) e tranzicionit të qetë transition. Për shembull, së pari ngadalë, pastaj shpejt, pastaj përsëri ngadalë etj.

Sintaksa

përzgjedhësi {
	transition-timing-function: vlera;
}

Vlerat

Vlera	Përshkrimi
`ease`	Së pari ngadalë, pastaj shpejt, në fund përsëri ngadalë.
`ease-in`	Fillon ngadalë dhe përshpejtohet gradualisht.
`ease-out`	Fillon shpejt dhe ndalon gradualisht.
`ease-in-out`	Së pari ngadalë, pastaj shpejt, në fund përsëri ngadalë. Ndryshon nga ease në shpejtësi.
`linear`	Gjithmonë e njëjta shpejtësi.
`step-start`	Nuk ka animacion, vetia merr menjëherë vlerën përfundimtare.
`step-end`	Nuk ka animacion, vetia pret kohën, të caktuar në `transition-duraton`, e pastaj menjëherë merr vlerën përfundimtare.
`steps`	Vlera e vetisë ndryshon me kërcime.
`cubic-bezier`	Lakor Bezier, i cili mund të përcaktojë animacion arbitrar. Shih gjenerator lakoresh Bezier.

Vlera e parazgjedhur: ease.

Krahasimi i vlerave të ndryshme

Vendos miun mbi blloqet e paraqitura më poshtë, për të parë funksionimin e të gjitha llojeve të funksioneve kohore:

Shembull

Vendos miun mbi bllok - ai do të ndryshojë në mënyrë të qetë gjerësinë e tij për 2 sekonda. Meqë është vendosur vlera ease-in, atëherë animacioni do të fillojë ngadalë dhe do të përshpejtohet gradualisht:

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

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

Shihni gjithashtu

vetia transition-duration,
e cila përcakton kohëzgjatjen e tranzicionit të qetë
vetia transition-property,
e cila përcakton emrin e vetisë për tranzicionin e qetë
vetia transition-delay,
e cila përcakton vonesën para tranzicionit të qetë
vetia transition,
e cila është shkurtim për tranzicionin e qetë
vetia animation,
me të cilën mund të bëhet animacion