Транзиција-кашњење - ЦСС-трикови

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

.delay-me ( transition-delay: 0.25s; )

Вредност може бити једна од следећих:

Важећа вредност времена дефинисана у секундама или милисекундама, нпр. 1.3sИли125ms
Листа временских вредности одвојених зарезом, за дефинисање одвојених вредности кашњења на више прелаза за један елемент, нпр 1s background-color, 350ms transform

Подразумевана вредност за transition-delayје 0s, што значи да неће доћи до кашњења и прелазак ће почети да се дешава одмах. Временска вредност се може изразити као децимални број ради прецизнијег подешавања времена.

Када транзиција има негативну вредност кашњења, то ће довести до тога да транзиција започне одмах (без одлагања), међутим, транзиција ће започети делимично кроз процес, као да је већ започела.

Следећа оловка показује ефекат лебдења на пољу које користи transition-delayвредност 2sса трајањем преласка од 1s:

Погледајте
демонстрацију одлагања транзиције оловке компаније ЦСС-Трицкс (@ цсс-трицкс)
на ЦодеПен-у.

Сада то упоредите са следећом демонстрацијом која има кашњење -1sи трајање 3s:

Погледајте
демонстрацију одлагања транзиције оловке
Нега од ЦСС-Трицкс (@ цсс-трицкс) на ЦодеПен-у.

Приметите да су у другом примеру видљиве само последње две трећине стварног преласка и да нема кашњења. Негативна вредност уклања кашњење и ефикасно смањује трајање.

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

.example ( -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -o-transition-delay: 500ms; transition-delay: 500ms; )

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

Уобичајени случај примене су прелазни прелази:

Погледајте оловку
распоређених анимација Цхриса Цоииера (@цхрисцоииер)
на ЦодеПен-у.

Подршка прегледача

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