Функција прелазног времена - ЦСС-трикови

Преглед садржаја:

transition-timing-functionИмовина, обично се користи као део transitionстенографије, користи се да дефинише функцију која описује како ће транзиција наставити током њеног трајања, што омогућава прелазак на брзину промене током свог курса.

.example ( transition-timing-function: ease-out; )

Те временске функције обично се називају олакшавајућим функцијама и могу се дефинисати помоћу унапред дефинисане вредности кључне речи, степенасте функције или кубичне Безиерове криве.

Допуштене вредности предефинисаних кључних речи су:

ублажити, лакоца
линеарно
лагодност
лагодност
лакоћа уласка
корак-почетак
корак-крај

За неке вредности ефекат можда неће бити толико очигледан ако трајање прелаза није подешено на већу вредност.

Свака од унапред дефинисаних кључних речи има еквивалентну кубну вредност Безиер-ове криве или еквивалентну вредност корачне функције. На пример, следеће две вредности временске функције биле би једнаке једна другој:

.example ( transition-timing-function: ease-out; ) .example-2 ( transition-timing-function: cubic-bezier(0, 0, 0.58, 1); )

Као и следеће две:

.example ( transition-timing-function: step-start; ) .example-2 ( transition-timing-function: steps(1, start); )

Користећи кораке () и Безијерове криве

steps()Функција вам омогућава да одредите интервале за функцију тајминг. Потребни су један или два параметра, одвојена зарезом: позитиван цео број и опционална вредност било startили end. Ако није укључен други параметар, подразумевано ће бити end.

Да бисте разумели корачне функције, ево демонстрације која се користи steps(4, start)за оквир са леве стране и steps(4, end)за оквир са десне стране (задржите показивач изнад оквира или поново учитајте оквир да бисте видели прелазе):

Погледајте ову оловку!

Када startје наведено, промена вредности се дешава на почетку сваког интервала, док endузрокује да се промена вредности догађа на крају сваког интервала.

Детаљан поглед на вредности Безиер-ове криве је изван опсега ове референце, али погледајте референце у одељку повезаних веза за алате који визуелно показују како ове вредности функционишу.

За компатибилност у свим подржаним прегледачима потребни су префикси добављача, са стандардном синтаксом проглашеном последњим:

.example ( -webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; )

ИЕ10 (прва стабилна верзија ИЕ која подржава transition-timing-function) не захтева -ms-префикс.