Преход-забавяне - CSS-трикове

В transition-delayимота, който обикновено се използва като част от transitionстенограмите, се използва за определяне на продължителността на времето за забавяне на началото на прехода.

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

Стойността може да бъде една от следните:

Валидна стойност на времето, определена в секунди или милисекунди, например 1.3sили125ms
Списък със стойности на времето, разделен със запетая, за дефиниране на отделни стойности на забавяне при множество преходи за един елемент, напр 1s background-color, 350ms transform

Стойността по подразбиране за transition-delayе 0s, което означава, че няма да има забавяне и преходът ще започне да се извършва незабавно. Стойността на времето може да бъде изразена като десетично базирано число за по-прецизно синхронизиране.

Когато преходът има стойност на забавяне, която е отрицателна, това ще доведе до незабавно започване на прехода (без забавяне), но преходът ще започне по средата на процеса, сякаш вече е започнал.

Следващата писалка показва ефект на задържане върху поле, което използва transition-delayстойност 2sс с продължителност на прехода от 1s:

Вижте
демонстрацията за забавяне на прехода на писалката от CSS-Tricks (@ css-tricks)
на CodePen.

Сега сравнете това със следващата демонстрация, която има забавяне -1sи продължителност 3s:

Вижте
демонстрацията за забавяне на прехода на отрицателна писалка от CSS-трикове (@ css-трикове)
на CodePen.

Забележете, че във втория пример са видими само последните две трети от действителния преход и няма забавяне. Отрицателната стойност премахва закъснението и ефективно намалява продължителността.

За съвместимост във всички поддържащи браузъри се изискват префикси на доставчици, като стандартният синтаксис е деклариран последен:

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

IE10 (първата стабилна версия на IE, която се поддържа transition-delay) не изисква -ms-префикса.

Често срещан случай е прехвърлянето на етапи:

Вижте
анимациите на Chris Coyier (@chriscoyier)
на CodePen.

Поддръжка на браузър

Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.