Īpašība transition-timing-function

Īpašība transition-timing-function nosaka ātruma izmaiņas (paātrinājumu) vienmērīgajai pārejai transition. Piemēram, sākumā lēni, tad ātri, tad atkal lēni utt.

Sintakse

cssselektors {
  transition-timing-function: vērtība;
}

Vērtības

Vērtība	Apraksts
`ease`	Sākumā lēni, tad ātri, beigās atkal lēni.
`ease-in`	Sākas lēni un pakāpeniski paātrinās.
`ease-out`	Sākas ātri un pakāpeniski apstājas.
`ease-in-out`	Sākumā lēni, tad ātri, beigās atkal lēni. Atšķiras no ease ar ātrumu.
`linear`	Vienmēr viens un tas pats ātrums.
`step-start`	Animācijas nav, īpašība uzreiz pieņem galīgo vērtību.
`step-end`	Animācijas nav, īpašība gaida laiku, kas norādīts `transition-duraton`, un pēc tam acumirklī pieņem galīgo vērtību.
`steps`	Īpašības vērtība mainās ar lēcieniem.
`cubic-bezier`	Bezier līkne, kas var norādīt patvaļīgu animāciju. Skat. Bezier līkņu ģenerators.

Noklusējuma vērtība: ease.

Dažādu vērtību salīdzinājums

Novietojiet peles kursoru uz zemāk redzamajiem blokiem, lai redzētu visu laika funkciju veidu darbību:

Piemērs

Novietojiet peles kursoru uz bloka - tas vienmērīgi mainīs savu platumu 2 sekunžu laikā. Tā kā ir iestatīta vērtība ease-in, animācija sāksies lēni un pakāpeniski paātrināsies:

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

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

Результат:

Skatiet arī

īpašība transition-duration,
kas norāda vienmērīgās pārejas ilgumu
īpašība transition-property,
kas norāda īpašības nosaukumu vienmērīgajai pārejai
īpašība transition-delay,
kas norāda aizkavi pirms vienmērīgās pārejas
īpašība transition,
kas ir saīsinājums vienmērīgajai pārejai
īpašība animation,
ar kuras palīdzību var izveidot animāciju