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-
префикс.
Уобичајени случај примене су прелазни прелази:
Погледајте оловку
распоређених анимација Цхриса Цоииера (@цхрисцоииер)
на ЦодеПен-у.
Подршка прегледача
Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.
Десктоп
Хром | Фирефок | ИЕ | Ивица | Сафари |
---|---|---|---|---|
4 * | 5 * | 10 | 12 | 5.1 * |
Мобиле / Таблет
Андроид Цхроме | Андроид Фирефок | Андроид | иОС Сафари |
---|---|---|---|
88 | 85 | 2,1 * | 6,0-6,1 * |